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