在线表格动态增删行列-优快云博客

本文介绍了一个简单的网页应用，实现在线表格的动态增删行和列的功能，包括增加行、增加列、删除行、删除列等操作，通过JavaScript实现在网页上交互式地编辑表格数据。

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

       var tbl = document.createElement("table");
       tbl.border = "1";
       tbl.id = "table1";
       var colIndex = 1;
       var rowIndex = 1;
       function addRows() {

           var boy = document.getElementsByTagName("body")[0];
           if (getRows() > 0) {
               var tr = document.createElement("tr");
               tr.id = "tr" + rowIndex.toString();
               trTop = document.getElementsByTagName("tr")[0];
               for (var i = 1; i < getCols(); i++) {
                  // debugger;
                   var tdid = trTop.childNodes[i - 1].id;
                   var trid = trTop.id.replace("tr", "");
                   tdid = tdid.replace("td"+trid,"");

                   var td = document.createElement("td");
                   // td.innerHTML = getRows() + 1;
                   td.innerHTML = rowIndex.toString();
                   td.innerHTML += tdid;

                   td.id = "td" + rowIndex + tdid.toString();
                   td.setAttribute("onclick", "ChangeCol(this);");
                   tr.appendChild(td);

               }
                var deltd = document.createElement("td");
                var delbtn = document.createElement("input");
                delbtn.type = "button";
                delbtn.value = "删除";
                delbtn.setAttribute("onclick", "delRow(this);");
                deltd.appendChild(delbtn);
                tr.appendChild(deltd);


           }
           else {
               var tr = document.createElement("tr");
               tr.id = "tr" + rowIndex.toString();
               var td = document.createElement("td");
               td.innerHTML = rowIndex.toString()+colIndex.toString();
               td.id = "td" + rowIndex.toString() + colIndex.toString();
               td.setAttribute("onclick", "ChangeCol(this);");
               tr.appendChild(td);
               var deltd = document.createElement("td");
               var delbtn = document.createElement("input");
               delbtn.type = "button";
               delbtn.value = "删除";
               delbtn.setAttribute("onclick", "delRow(this);");
               deltd.appendChild(delbtn);
               tr.appendChild(deltd);
           }
           rowIndex++;
           tbl.appendChild(tr);
           boy.appendChild(tbl);
       }
       function addCols() {
           //debugger;
           if (getRows() > 0) {
               colIndex++;
               var trs = document.getElementsByTagName("tr");
               //debugger;
               for (var i = 1; i <= trs.length; i++) {
                   var td = document.createElement("td");
                   //debugger;
                   //td.innerHTML = i;
                   td.innerHTML = trs[i - 1].id.replace("tr", "") + colIndex.toString();
                   td.id = "td" + trs[i - 1].id.replace("tr", "") + colIndex.toString();
                   td.setAttribute("onclick", "ChangeCol(this);");
                   //先删除最后一列

                   var lastCol = document.getElementsByTagName("tr")[i - 1].lastChild;

                   document.getElementsByTagName("tr")[i - 1].removeChild(lastCol);
                   document.getElementsByTagName("tr")[i - 1].appendChild(td);
                   document.getElementsByTagName("tr")[i - 1].appendChild(lastCol);

               }

           }
           else {

               addRows();
           }
       }
       function getRows() {
           return document.getElementsByTagName("tr").length;
       }
       function getCols() {
           return document.getElementsByTagName("tr")[0].getElementsByTagName("td").length;
       }
       function delRow(o) {
           tbl.removeChild(o.parentNode.parentNode);
       }
       function delCol() {
       var col = document.getElementById("hidColId").value
           if (col != "") {
                //如果有行
               if (getRows() > 0) {
                   var trs = document.getElementsByTagName("tr");
                   if (trs[0].getElementsByTagName("td").length == 2) {

for (var i = trs.length-1;i >= 0 ; i--) {
document.getElementById("table1").removeChild(trs[0]);

                       }
                   }
                   else {
                       for (var i = 0; i < trs.length; i++) {
                           var tdid = trs[i].id.replace("tr", "td") + col.toString();

trs[i].removeChild(document.getElementById(tdid));

                       }
                   }
               }

document.getElementById("hidColId").value = "";
document.getElementById("colId").innerHTML = "";

           }
       }
       function ChangeCol(o) {
           var rowcol = o.id.replace("td", "");
           var row = o.parentNode.id.replace("tr","");
           var col = rowcol.substr(row.length);
           document.getElementById("hidColId").value = col;
           document.getElementById("colId").innerHTML = col;
           document.getElementById("btnDelCol").disabled = false;

}
</script>
</head>