javascript操作表格

下面是详细讲解"JavaScript操作表格"的完整攻略。

操作表格的基本方法

1.获取表格的节点

在JavaScript中，我们可以通过以下方式获取HTML中的表格节点：

var table = document.getElementsByTagName('table')[0];  //获取HTML中的第一个table标签

上述代码中，我们使用了getElementsByTagName()方法来获取了HTML中第一个table标签节点，如果有多个table节点，可以使用索引值获取到具体的节点。

2.获取表格中的数据

获取表格中所有的数据

获取表格中所有的数据可以使用table.rows方法和table.cells方法：

var rows = table.rows; //获取表格中的所有行
for(var i=0;i<rows.length;i++){
    var cells = rows[i].cells; //获取该行中的所有单元格
    for(var j=0;j<cells.length;j++){
　　        var cellData = cells[j].innerHTML; //获取单元格中的数据
    }
}

上述代码中，我们使用了嵌套循环，首先通过table.rows方法获取到表格中的所有行，再通过for循环遍历每一行中的所有单元格并获取其中的数据。

获取表格中特定单元格的数据

获取表格中特定单元格的数据可以使用表格的行列索引：

var cellData = table.rows[0].cells[1].innerHTML; //获取第一行第二列单元格的数据

上述代码中，我们直接使用表格的行列索引获取了表格中第一行第二列单元格的数据。

3.添加新的行和列

添加新的行

要在表格中添加一个新的行，我们可以在表格的<tbody>元素中插入一个新的行元素<tr>：

var newRow = table.insertRow(0); //在表格中插入一行，该行为第一行

上述代码中，我们使用了表格的insertRow()方法在表格的第一行位置插入了一个新的行。

添加新的列

要在表格中添加新的列，我们可以在每一行中插入一个新的单元格元素<td>：

for(var i=0;i<rows.length;i++){
    var newCell = rows[i].insertCell(0); //在该行的第一列位置添加一个新单元格
    newCell.innerHTML = "新单元格内容";
}

上述代码中，我们使用了insertCell()方法和innerHTML属性，遍历所有行并向每一行的第一列添加了一个新的单元格。

示例说明

示例一

在一个表格中添加一行新的数据，并在该行的三个单元格中分别显示"姓名"、"年龄"和"性别"三项数据：

<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

var table = document.getElementById('myTable'); //获取表格节点
var newRow = table.insertRow(2); //在第三行插入新的一行
var cell1 = newRow.insertCell(0); //在新行的第一列插入一个新的单元格
var cell2 = newRow.insertCell(1); //在新行的第二列插入一个新的单元格
var cell3 = newRow.insertCell(2); //在新行的第三列插入一个新的单元格
cell1.innerHTML = "王五"; //设置第一列单元格的内容
cell2.innerHTML = "30"; //设置第二列单元格的内容
cell3.innerHTML = "男"; //设置第三列单元格的内容

运行上述代码，我们可以看到一个新的数据行被添加到了表格中。

示例二

获取一个表格中第一行第二列单元格的数据并进行修改，修改后的数据为"25岁"：

<table id="myTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
            <td>男</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

var table = document.getElementById('myTable'); //获取表格节点
var cell = table.rows[0].cells[1]; //获取第一行第二列单元格节点
cell.innerHTML = "25岁"; //修改单元格中的数据

运行上述代码，我们可以看到表格中第一行第二列单元格的数据被修改为了"25岁"。