[英]HTML Table content insert and clear using javascript
I have a table and assigned a id to it. 我有一张桌子,并为其分配了一个ID。 Initially there is no content.ie, just the table tag.
最初没有content.ie,只有table标签。
I am using this to clear the table contents 我正在用它清除表内容
function emptyTable ( tableRef )
{
var resultCount = tableRef.rows.length;
for ( var i=0; i<resultCount; i++)
{
if ( tableRef.rows[tableRef.rows.length-1].cells[0].tagName == "TD" )
{
tableRef.deleteRow(tableRef.rows.length-1);
}
}
}
tableRef will have the table id. tableRef将具有表ID。 For first time i have clear the table and the rows are inserted.
第一次我已经清除了表格并插入了行。
var resultListRef = document.getElementById("showReferencesDet");
var row = resultListRef.insertRow(0);
var newCell = row.insertCell(0);
newCell.innerHTML = 'Select';
var newCell2 = row.insertCell(1);
newCell2.innerHTML = 'Reference Number';
var row = resultListRef.insertRow(resultListRef.rows.length);
var newCell = row.insertCell(0);
name="referenceId" value="' + id + '" />';
newCell.innerHTML = '<input type="checkbox" id="referenceId" name="referenceId" value="' + allVars + '" />';
var newCell2 = row.insertCell(1);
newCell2.innerHTML = RefNo;
It works for the first time but didn't works in the 2nd time. 它是第一次工作,但第二次没有工作。
Please help to solve it. 请帮助解决。
just change your for loop 只需更改您的for循环
function emptyTable ( tableRef )
{
document.getElementById(tableRef).innerHTML='';
}
Instead of: 代替:
var row = resultListRef.insertRow(resultListRef.rows.length);
you can do: 你可以做:
var row = resultListRef.insertRow(-1);
and the row will be inserted as the last row. 该行将作为最后一行插入。
Removing the rows of a table doesn't necessarily remove all content, it may still contain empty text nodes, thead and tfoot elements, etc. Consider: 删除表的行并不一定会删除所有内容,它可能仍包含空的文本节点,thead和tfoot元素等。请考虑:
function emptyTable ( tableRef ) {
while (tableRef.firstChild) {
tableRef.removeChild(tableRef.firstChild);
}
}
That will clear everything from inside the table (but not properties and attributes of the table itself) as if you had <table ... ></table>
. 这将清除表内部的所有内容 (但不会清除表本身的属性和属性),就好像您具有
<table ... ></table>
。
However, you may want to keep header rows and footers. 但是,您可能需要保留页眉行和页脚。 In that case, you just want to remove the tBody elements:
在这种情况下,您只想删除tBody元素:
function emptyTableBodies ( tableRef ) {
var tBodies = tableRef.tBodies;
for (var i=tBodies.length; i;) {
tableRef.removeChild(tBodies[--i]);
}
}
so you can do: 因此,您可以执行以下操作:
<table id="t0">
<thead>
<tr><th>head
</thead>
<tr><td>0
<tr><td>0
<tr><td>0
<tr><td>0
</table>
<button onclick="emptyTableBodies(document.getElementById('t0'))">Empty table bodies</button>
Note that a table with no content is not valid, so fix that as soon as you can after the above. 请注意,没有内容的表是无效的,因此请在上述之后尽快解决。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.