When using the DOM to edit a table, how do you edit the contents of a
specified cell?
I tried looking up different ways on w3Schools however console keeps giving me this message stating the values are null. Can somebody help?
This is the HTML for the table I am trying to edit:
<div id="courseSummaryContainer" class="tab">
<table cellspacing="0" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
</tbody>
</table>
</div>
I tried:
document.getElementById("table.summaryTable.courseSummary.smallFontTable").rows[0].cells; x[0].innerHTML = "NEW CONTENT";
but it didn't work.
Use id for table and try
<table cellspacing="0" id="courseSummaryContainer" class="summaryTable courseSummary smallFontTable" summary="Health Care by province">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
<th>Submission entry type</th>
</tr>
</thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
<td>Final</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
<td>Final</td>
</tr>
</tbody>
</table>
<script>
var x = document.getElementById("courseSummaryContainer").rows[0].cells;
x[0].innerHTML = "NEW CONTENT";
</script>
table.summaryTable.courseSummary.smallFontTable is not an ID for your table, so getElementById will not work.
That table has no ID, but it does have 3 CSS classes. Here's a tutorial on the difference.
See, also, the CSS Selectors reference at MDN.
So you can't use getElementById, but you can use document.querySelectorDoc.
Code as in the snippet below selects the first table, with the class courseSummary, that's contained by the courseSummaryContainer div.
Finally, avoid using innerHTML. Bad things come to those who do.
var csTable = document.querySelector ("#courseSummaryContainer table.courseSummary");
if (csTable) {
csTable.rows[0].cells[0].textContent = "NEW CONTENT";
}
td, th {
border: 1px solid gray;
padding: 0.2ex 1ex;
}
table { border-collapse: collapse;}
<div id="courseSummaryContainer" class="tab">
<table class="summaryTable courseSummary smallFontTable">
<thead><tr>
<th>Name</th>
<th>Description</th>
<th>Date of entry</th>
<th>Rating</th>
<th>Grade</th>
</tr></thead>
<tbody>
<tr class="row-even">
<td>Illinois</td>
<td>Online system</td>
<td>201602</td>
<td>0100</td>
<td>5</td>
</tr>
<tr class="row-odd">
<td>Alabama</td>
<td>Regional area health</td>
<td>201606</td>
<td>0100</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
Related
I am creating a HTML table dynamically and I want the headers to include data-reverse attribute in order to allow reverse sorting by pushing table headers:
<table>
<thead>
<tr>
<th data-reverse="true">Name</th>
<th data-reverse="true">Surname</th>
<th data-reverse="true">Age</th</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>62</td>
</tr>
<tr>
<td>Dylan</td>
<td>Jones</td>
<td>37</td>
</tr>
<tr>
<td>Alan</td>
<td>Shearer</td>
<td>55</td>
</tr>
<tr>
<td>Ringo</td>
<td>Starr</td>
<td>52</td>
</tr>
</tbody>
</table>
The code slice is below. I am wondering what should be corrected in the addRow() function in order to produce the above output with data-reverse="true" attribute?
Or somewhere else.
addRow(thead, "th");
fragment.appendChild(thead);
function addRow(dom, tag) {
for(j=1;j<rowArray.length;j++){
var el = doc.createElement(tag);
el.setAttribute(data-reverse,"true");
el.innerHTML = rowArray[j];
tr.appendChild(el);
dom.appendChild(tr);
}
}
i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin
A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Is there a way to sort a table with multiple rowspans? I was trying a plugin in this jsFiddle, but it seems age does not get sorted correctly. Is there a way to sort an HTML table with rowspans? I need to have this table sorted with rowspan.
HTML
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th>First Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>28</td>
<td rowspan="2" style="vertical-align:middle">AAA</td>
</tr>
<tr class="expand-child">
<td>John</td>
<td>33</td>
</tr>
<tr>
<td>Clark</td>
<td>18</td>
<td>BBB</td>
</tr>
<tr>
<td>Bruce</td>
<td>22</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS
$('table').tablesorter();
It doesn't like your "expand-child" class. If you remove that, then it seems to sort just fine. What is that class doing?
Use Data-tables, it has all functionality: https://datatables.net/
$('.tablesorter').DataTable( {
"columnDefs": [ {
"targets": [ 0, 2 ],
"orderable": false
} ]
});
I have this table
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>
It renders like this
I want to get rid of the blank column of headers.
I've tried using this css
'th:nth-of-type(2) {display: none;}'
I got this instead
The rowspan is throwing me off. I'm willing to use a clever regex substitution or css.
I used css not selector
th:nth-of-type(2), tbody th:not([rowspan]) {display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>
Let's get weird with it. I think :empty pseudo selector just might be what you're looking for. I don't know how different your full table structure is, but this should put you on the right path.
I placed my css on two lines for readability. You can combine as you wish.
tr > th:empty:nth-child(2){display: none;}
tr > td:empty:nth-child(2){display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>
Here is one way to do it with jquery. This locates each <th> with a rowspan attribute and hides any immediately proceeding column.
$("table.dataframe").find("th[rowspan]").each(function() {
var index = $(this).index() + 2;
$(this).closest("table.dataframe").find('th,td').filter(":nth-child("+index+")").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>
You can achieve this by giving tds and ths borders then setting the first col border to 0 or none, but you gonna have to omit or set the table border to 0:
table {
border-collapse: collapse;
}
table th, td {
border: 1px solid #000;
}
table th.no-border {
border: none;
}
<table class="dataframe">
<thead>
<tr style="text-align: right;">
<th class="no-border"></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
is this table data dynamic?
assuming this table is fixed javascript way would be like this
it checks if your second column is blank then remove then second element of each table row
<script>
var x = document.getElementsByTagName("th");
var check = x[1].innerHTML;
if(check == "") {
var blk_0 = document.getElementsByTagName("tr")[0];
var blk_1 = document.getElementsByTagName("tr")[1];
var blk_2 = document.getElementsByTagName("tr")[2];
blk_0.removeChild(blk_0.childNodes[3]);
blk_1.removeChild(blk_1.childNodes[3]);
blk_2.removeChild(blk_2.childNodes[1]);
}
</script>
https://jsfiddle.net/3erhzcta/
I'm trying to implement Footable, a JQuery plugin used to make tables responsive. There is an add-on for Footable to add pagination. [Demo]
And (http://fooplugins.com/footable/demos/paging.htm) for using the pagination add-on. I tried following this demo but my pagination came up as a vertical un-ordered list. The buttons are functional but unsightly. Here is a link images which i can not post here because my repuation is not high enough.
Here is my code for the table:
<table class="table table-hover" ng-show='form.length>0' data-page-navigation=".pagination">
<thead>
<th ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'" >{{formAttr.attributes.name}}<br/>({{formAttr.type}})</th>
<th>Submission Time</th>
</thead>
<tbody>
<tr ng-repeat="(key, response) in formResponses">
<td ng-repeat="(key, formAttr) in form | orderBy:'attributes.order'">{{$parent.response.results[formAttr.att_id]}}</td>
<td>{{response.submission_time}}</td>
</tr>
</tbody>
<tfoot class="">
<tr>
<td colspan="5">
<div class="pagination pagination-centered"></div>
</td>
</tr>
</tfoot>
</table>
Your footer should look something like this:
<tfoot class="hide-if-no-paging">
<tr>
<td colspan="5" class="text-center">
<ul class="pagination">
</ul>
</td>
</tr>
</tfoot>
You can tell, that's different that what it says in the demo. This link showed me the difference https://github.com/bradvin/FooTable/issues/136.
Here's a plunk to demonstrate the issue: http://plnkr.co/edit/8Yyk8NN8rsqdXtrvJDOM
You need to add both attribute for pagination:
data-page-navigation=".pagination" data-page-size="2" into table tag
(If not placing the pagination in the table footer) Don't use a CSS class for table-to-pagination relationships. Use CSS ID instead.
Consider the following...
BAD - Example using CSS class to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation=".pagination" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div class="pagination hide-if-no-paging"></div>
The footable javascript code will see two pagination objects. Which will be used by table1 and which will be used by table2 is not deterministic. This throws the footable javascript into a tizzy.
Rather than use CSS classes, be more specific by using a CSS ID instead.
GOOD - Example using CSS ID to relate pagination object to table:
<table id="table1" class="footable" data-page-navigation="#pagination1" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination1" class="pagination hide-if-no-paging"></div>
<table id="table2" class="footable" data-page-navigation="#pagination2" data-page-size="10">
<thead>
<th>Some Title</th>
<th>Some other Title</th>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some more data</td>
</tr>
</tbody>
</table>
<div id="pagination2" class="pagination hide-if-no-paging"></div>
Javascript Example:
$(document).ready(function () {
$(".footable").footable();
});