I have a web app, front end has a bootstrap table, whose data rendered from Django rest framework.
As the data is rendered using data-field, it only has table header, does not have table column.
I want to make some some column editable but some not, but but failed to do so. The contenteditable='true'/'false' flag does not function on a column level.
How could I make some column editable but some not？
<table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-refresh="true"
data-show-fullscreen="true"
data-height="650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" data-checkbox="true"></th>
<th data-field="type">Course Type</th>
</tr>
</thead>
</table>
use bootstrap table plugin "x-editable" to make a column editable or non-editable use
data-editable="true" data-editable="false" respectively on <tr>
for example
<table id="my_table_id"
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-4" data-editable="true">Name</th>
<th class="col-md-7" data-editable="false">Description</th>
</tr>
</thead>
</table>
Related
I'm working on optimizing a website for visually impaired. I have a table on the page in the following format -
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
Currently the screen reader is announcing "row 1 col 1 number" but the expectation is that it should announce "row 1 col 1 number column header" when its a element. How can I configure it? Setting role="columnheader" is not working.
It is scope you are looking for to associate columns and rows.
scope="col" will associate a table header as a column header.
You can also associate a row header if you wish with scope="row"
<table>
<caption>My table caption - don't forget this so people know what a table is for / about</caption>
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Mike</td>
<td>Simmons</td>
</tr>
</tbody>
</table>
See https://www.w3.org/TR/WCAG20-TECHS/H63.html for more info on this technique.
p.s. don't forget to add a <caption> to your table!
Does anyone know how I can stop only some sets of numbers from being linked eg numéros - but also let the iphone link the real phone numbers?
<h2>Table</h2>
<table class="table table-sm table-striped table-hover">
<caption class="sr-only">Résultat(s) de recherche</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Numéro</th>
</tr>
</thead>
<tbody>
<tr tabindex="0" role="button" onclick="window.location='http://www.google.com'">
<td>123 Plomberie</td>
<td class="no_underline">25458-5172-53</td>
</tr>
</tbody>
</table>
This solution worked for all type of number, but how let the iphone link the real phone numbers : https://webmasters.stackexchange.com/questions/4459/keep-iphone-browser-from-turning-numbers-into-links
Not a solution but temporary workaround, its worked for all number. Add this in header of html
<meta name = "format-detection" content = "telephone=no">
I'm trying to print the detail on a check in NetSuite using the HTML portion of the Advanced PDF functionality.
I'm printing a table using HTML, where the top row is the header, and the remaining rows are the data i'd like to display. The check contains multiple bills, and I would like to display the details of these multiple bills.
The code I'm using is below. I print the header row, and then attempt to print the details rows.
The issue I'm facing: I can print 1 row just fine, but when I try to print multiple rows, NetSuite crashes and gives me the following error message: "An unexpected error has occurred. Please click here to notify support and provide your contact information."
<#if check.apply?has_content><#list check.apply as apply>
<table style="position: absolute;overflow: hidden;left: 36pt;top: 15pt;width: 436pt;border-collapse: collapse;border: 2px solid black;">
<thead>
<tr>
<th bgcolor="#000000"><font color="white">Date</font></th>
<th bgcolor="#000000"><font color="white">Description</font></th>
<th bgcolor="#000000"><font color="white">Orig. Amt.</font></th>
<th bgcolor="#000000"><font color="white">Amt. Due</font></th>
<th bgcolor="#000000"><font color="white">Discount</font></th>
<th bgcolor="#000000"><font color="white">Amount</font></th>
</tr>
</thead>
<tbody>
<tr>
<td>${apply.applydate}</td>
<td>${apply.refnum}</td>
<td>${apply.total}</td>
<td>${apply.due}</td>
<td>${apply.disc}</td>
<td>${apply.amount}</td>
</tr>
</tbody>
</#list></table>
</#if>
I think this "<#list check.apply as apply>" should be placed after "</thead>" since you only want the table header to be created once. Something like this
<#if check.apply?has_content>
<table style="position: absolute;overflow: hidden;left: 36pt;top: 15pt;width: 436pt;border-collapse: collapse;border: 2px solid black;">
<thead>
<tr>
<th bgcolor="#000000"><font color="white">Date</font></th>
<th bgcolor="#000000"><font color="white">Description</font></th>
<th bgcolor="#000000"><font color="white">Orig. Amt.</font></th>
<th bgcolor="#000000"><font color="white">Amt. Due</font></th>
<th bgcolor="#000000"><font color="white">Discount</font></th>
<th bgcolor="#000000"><font color="white">Amount</font></th>
</tr>
</thead>
<tbody>
<#list check.apply as apply>
<tr>
<td>${apply.applydate}</td>
<td>${apply.refnum}</td>
<td>${apply.total}</td>
<td>${apply.due}</td>
<td>${apply.disc}</td>
<td>${apply.amount}</td>
</tr>
</#list>
</tbody>
</table>
</#if>
I am using table-striped style provided by Bootstrap in a table. And I am using angular js to populate the data. It is not showing the table in stripe format. Can someone help me in recognizing the error that I am making?
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody ng-repeat="e in data.events">
<tr>
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
I think you meant to put the ng-repeat on the tr element instead of the body. You're repeating the body instead of rows.
Bootstrap alternates the colours on the rows, and since you are creating a new table body with 1 row each, it's only going to show one color.
I believe your issue is the placement of the repeat directive. If you move it to your tr element, it should be fine. As is, it is creating a new tbody element for each item in your events array. Since table-striped alternates the background color of even rows, and each tbody contains only 1 row, you aren't seeing that style applied.
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
This should work fine, but you need to repeat the table rows <tr>, not the table body <tbody>.
I am creating a table and I would like to show and hide individual columns. What I could not achieve is that all columns appear and the user can show or hide the like.
<table border="0" id="proforma" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-button-theme="b" data-column-btn-theme="b" data-column-btn-text="Ver más" data-column-popup-theme="b">
<thead>
<tr class="ui-bar-d">
<th class="header_table cliente_table">Cliente</th>
<th class="header_table real_table">Real (%)</th>
<th class="header_table proy_table">Proy (%)</th>
<th class="header_table falta_table">Falta (M$)</th>
<th class="header_table cod_table" data-priority="5">Código</th>
<th class="header_table dato_table" data-priority="6">Dirección</th>
</tr>
</thead>
</table>
Of these 6 columns I would like to appear for the first time the first 4, the last two always hidden. But by pressing the button to show / hide, appear also the first 4 to give the user the option that is not what I could get.
Only columns with a data priority are included in the toggle list, so add a data-priority of 1 to the first four columns:
<table border="0" id="proforma" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-button-theme="b" data-column-btn-theme="b" data-column-btn-text="Ver más" data-column-popup-theme="b">
<thead>
<tr class="ui-bar-d">
<th class="header_table cliente_table" data-priority="1">Cliente</th>
<th class="header_table real_table" data-priority="1">Real (%)</th>
<th class="header_table proy_table" data-priority="1">Proy (%)</th>
<th class="header_table falta_table" data-priority="1">Falta (M$)</th>
<th class="header_table cod_table" data-priority="5">Código</th>
<th class="header_table dato_table" data-priority="6">Dirección</th>
</tr>
</thead>
</table>