使用JS实现table里面td内容的更改

Posted 2023-05-11

一个table下有很多td 无ID和name
使用js 判断把所有td里面内容为空的td内容变成"添加"
给我一串js即可

1、首先根据图示全部代码新建html文件。

2、然后根据图示全部代码创建三行两列的表格。

3、然后根据图示全部代码创建按钮。

4、然后根据图示全部代码创建js函数。

5、然后根据图示全部代码获取表格第一行。

6、然后根据图示全部代码更改第一行第一个单元格的内容。

7、然后根据图示全部代码给按钮添加js函数事件。

8、预览效果如图显示出了table。

9、点击按钮，第一行第一个单元格的内容更改，即代表成功实使用JS实现table里面td内容的更改。

参考技术A var td_array=new Array();
var td_length=$('.table td').length;
for(var n=0;n<td_length;n++)
//for(var n=0;n<)
td_array[n]=$('.table td:eq('+n+')').html();



for(var m=0;m<td_array.length;m++)
    //alert("空");
        if(td_array[m]=="")
            
                $('.table td:eq('+m+')').html("添加");
            
    

jq可以么.......用jq的话会很简单。试过成功了~~你也可以有自己的想法哈，.table是当前table的类名，避免和别的table混淆用的。你自己简化下，貌似可以不用数组的，最近做的都和数组有关，就什么都习惯加数组了...

参考技术B 你好，如果td里没有id或是name的话，貌似没有办法实现了。不过我自己也学的不深，或许也有高手有这个办法吧，我是习惯性用id来做的。document.getElementById("id"); 参考技术C <script>
   var oList = documet.getElementByTagName("td");
   for(var i=0;i<oList.length;i++)
       var c = oList[i].innerHtml;
       if(c == '')
           oList[i].innerHtml="<input type='button' value='添加'>";
       
   
</script>

追问

本回答被提问者采纳

js 操作table

    <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>