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开始的，需要自己进行逻辑处理。