分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

js 操作table

发布时间:2023-09-06 01:45责任编辑:沈小雨关键词:js
 ???<script> ???????function getColumnDetail(column) { ???????????column.style.color = "blue"; //将被点击的单元格设置为蓝色 ???????????//alert(column.innerHTML); //弹出被点单元格里的内容 ???????????//单击单元格 td追加里面intput ???????????console.log(column.parentNode.rowIndex);//获取行所在的索引 ???????????getRowstd(column.parentNode.rowIndex); ???????????console.log(column.cellIndex); //获取列所在的索引 ???????}; ???????function setTable(trLineNumber, trColumn) { ???????????var _table = document.getElementById("table"); //获得tbody对象 ???????????var _row; ???????????var _cell; ???????????for (var i = 0; i < trLineNumber; i++) { //获取传递过来的行数 ???????????????_row = document.createElement("tr"); //创建元素tr ???????????????_table.appendChild(_row); //table下追加这个元素 ???????????????for (var j = 0; j < trColumn; j++) { ?//根据传递过来的字符串长度或其他 ???????????????????_cell = document.createElement("td"); //创建元素td ???????????????????_cell.onclick = function () { getColumnDetail(this) }; //为每个单元格增加单击事件 ???????????????????_cell.innerText = "000"; //元素的内容 ???????????????????_row.appendChild(_cell); //tr下面追加这个td ???????????????} ???????????} ???????} ???????function load() { ???????????var tab = document.getElementById("table"); ???????????var rows = tab.rows; //获取表格的行数 ???????????for (var i = 0; i < rows.length; i++) { //遍历表格的行 ???????????????for (var j = 0; j < rows[i].cells.length; j++) { ?//遍历每行的列 ???????????????????console.log(rows[i].cells[j].innerHTML); //输出单元格内容 ???????????????} ???????????} ???????} ???????function getRowstd(rowIndex) { ?//返回指定行下的所有td内容 ???????????var tab = document.getElementById("table"); ???????????var rows = tab.rows; //获取表格的行数 ???????????for (var i = 0; i < rows[rowIndex].cells.length; i++) { ???????????????console.log(rows[1].cells[i].innerHTML + "\r"); //输出单元格内容 ???????????} ???????} ???????window.onload = function () { ???????????setTable(5, 5); ???????????load();//函数调用 ???????} ???</script>

js 操作table

原文地址:https://www.cnblogs.com/enych/p/8573901.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved