JS@DOM:向表格中动态添加行显示信息,做到滚动效果

最近在学习D3,很多时候都用到了表格,并且在js中动态地添加和删除表格,在这里总结一下js关于表格的操作:

首先要知道,js中没有提供关于列的操作,所以关于列的操作只能通过操作行来实现,比如获得列的数量,只能通过获得行的单元格数量来获得列数(这里也有缺陷,如果某个单元格设置了colspan属性,就会出错)。

table.rows.length//获得表格的行数table.rows[0].cells.length//获得表格第一行的单元格的数量table.insertRow(i)//插入第(i+1)行,,行数(参数)从零开始tr.insertCell(i)//插入第(i+1)个单元格,参数从零开始

还有一些不常用的方法,参见w3school提供的教程:HTML DOM Table对象;

感谢showbo版主提供的简单实例:向表格中行显示信息,最多显示10行,超过10行则删除最上面的行(滚动显示信息的效果):

<input type="button" onclick="addRow()" value="添加新行" /><br /><table id="tb" border="1"></table><script>var total = 0;//测试用的,实际应用删除这个变量的引用function addRow() {var tb = document.getElementById('tb'), l = tb.rows.length;var tr = tb.insertRow(l);var td = tr.insertCell(0);td.innerHTML = 'xxxxxx'+total;//显示的内容,如果有多个单元格继续tr.insertCell(1),注意参数是从0开始的if (l >= 10) { //超过10行,删除第一行tr = tb.rows[0];tr.parentNode.removeChild(tr);}total++;}</script>

快乐不是因为得到的多而是因为计较的少!

JS@DOM:向表格中动态添加行显示信息,做到滚动效果

相关文章:

你感兴趣的文章:

标签云: