JS@DOM：向报表中动态添加行显示信息，做到滚动效果

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：向报表中动态添加行显示信息，做到滚动效果

相关推荐