HTML使用DOM对象获取Table数据

本文介绍了如何使用JavaScript遍历HTML表格,提取单元格中的数据,包括文本、select下拉选项和input输入值,以对象形式存储并用于后续处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

let paramAll = [];
let tableObj = document.getElementById("tableData").getElementsByClassName("item_tr"); // 找到需要获取数据的tr行
        for (let i = 0; i < tableObj.length; i++) {
            let getOnceFeeValueJson = {};
            let xh = (i + 1);
            let spmc = tableObj[i].cells[1].textContent; // td中文本数据
            let spjd = tableObj[i].cells[2].getElementsByClassName("form-control")[0].value; // td中select下拉选中数据value
            let spjdname = tableObj[i].cells[2].getElementsByClassName("form-control")[0].options[spjd].text; // td中select下拉选中数据label
            let gzd = tableObj[i].cells[3].getElementsByClassName("form-control")[0].value;
            let gzdname = tableObj[i].cells[3].getElementsByClassName("form-control")[0].options[gzd].text;
            let zl = tableObj[i].cells[4].getElementsByClassName("form-control")[0].value;
            let zlname = tableObj[i].cells[4].getElementsByClassName("form-control")[0].options[zl].text;
            let spbz = tableObj[i].cells[5].getElementsByTagName("input")[0].value; // td中input输入数据
            let ysbz = tableObj[i].cells[6].getElementsByTagName("input")[0].value;
            paramAll.push({ xh, spmc, spjdname, gzdname, zlname, spbz, ysbz });
        }

JavaScript中,要获取HTML表格(table)中的所有数据,通常会涉及遍历每一行(tr)并提取其中的数据。如果你想要获取表头(th)和单元格(td),可以按照以下步骤操作: 1. 首先,通过DOM选择器选中整个表格元素,例如: ```javascript var table = document.getElementById('yourTableId'); ``` 替换`yourTableId`为你实际的表格ID。 2. 然后,获取表头(如果有): ```javascript var thead = table.getElementsByTagName('thead')[0]; var headerRows = thead.getElementsByTagName('tr'); ``` 3. 接着,获取数据行(tbody或tfoot内的tr元素): ```javascript var tbody = table.getElementsByTagName('tbody')[0] || table.getElementsByTagName('tfoot')[0]; // 选取tbody或tfoot var dataRows = tbody.getElementsByTagName('tr'); ``` 4. 对于每行数据,遍历其单元格: ```javascript for (var i = 0; i < dataRows.length; i++) { var row = dataRows[i]; // 如果是表头,可能不需要<td> if (row.tagName === 'TH') { var cells = row.getElementsByTagName('th'); // 表头处理 } else { var cells = row.getElementsByTagName('td'); // 数据行处理 } for (var j = 0; j < cells.length; j++) { var cellData = cells[j].innerText || cells[j].textContent; // 这里cellData就是每个单元格的内容 console.log('Cell ' + (j+1) + ':', cellData); } } ``` 这将打印出表格中所有单元格的内容。如果你需要组织成更复杂的结构,比如对象数组,你可以创建一个函数去处理这些数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值