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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值