JS获取表格单元格坐标及给指定单元格赋值

JS获取表格单元格坐标及给指定单元格赋值

说明：

本文所述内容适用于通过JS方法，获取table中td标签坐标，即td标签所在单元格的行号、列号。以及为指定的单元格赋值。（如有不正确的地方，欢迎批评指正）

1. 获取单元格坐标

var table =document.getElementById("data_table");
// 行数
var rows = table.rows.length;
// 列数
var colums = table.rows[0].cells.length;

说明：

var colums = table.rows[0].cells.length;

当中，rows[0]代表获取第一行的列值，假如在表格第一行中合并了列单元格，那么获取到的最终结果会与实际列值有差异。

比如下图：



假如使用 rows[0] 那么获取到的列数应该为3.但是实际上的表格列数为5.所以想要获取到正确的列值，应该使用 rows[1] ,完整语句即：

var colums = table.rows[1].cells.length;

行数获取略有特殊，因为没有方法指定可以从第几列开始获取行数，所以假如合并了行单元格，虽然最终获取的行数数值结果是正确的，但是有可能在对指定单元格赋值过程中出现问题。

为避免这种现象发生，可以采用这种方式：

<table id="data_table">
<thead>

<tr>

<th>项目</th>

<th>所属期间</th>

<th colspan="3" style=" text-align: center; ">现金</th></tr>
<tr>
<th></th>
<th></th>
<th>业务收(退)款</th>
<th>财务收(退)款</th>
<th>差异</th></tr>
</thead>
<tbody>
<tr>
<td rowspan="2" style="  vertical-align: middle; ">诚意金</td>
<td>本日发生额</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td style="display: none"></td>
<td>累计发生额</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

即：

被合并的行单元格，用

style=" display:none"

隐藏掉。这种写法上，在给单元格赋值的时候，会比直接少写一个td减少很多问题。

2. 给指定单元格赋值

document.all("data_table").rows[tb_rowNum].cells[tb_cellNum].innerText = "data";

tb_rowNum: 指定的行号

tb_cellNum: 指定的列号

注意：

行号列号默认都是从0开始的，需要自己进行逻辑处理。