js 操作table

Posted 2020-10-27 enych

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