使用 JavaScript 在 HTML 表中添加和删除行

Question

HTML Table code: HTML表格代码：

<table id="edTable" name="edTable" class="table">
                    <tbody>
                        <tr id="edCol0"> 
                            <td>
                                <div class="container">
                                    <div class="row"> 
                                        <div class="col-md-3 mb-4">
                                            <label for="degree">Degree Received </label>
                                            <input class="fieldBorders" type="text" id="degree" name="degree" />
                                        </div> 
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3 mb-4">
                                            <label for="attdfrom">Attended From </label>
                                            <input class="fieldBorders" type="date" id="attdfrom" name="attdfrom" />
                                        </div>
                                        <div class="col-md-3 mb-4">
                                            <label for="attdtill">Attended Till </label>
                                            <input class="fieldBorders" type="date" id="attdtill" name="attdtill" />
                                        </div>
                                    </div>
                                </div>

                            </td>
                        </tr> 
                    </tbody>
                </table>

How do I add a JavaScript function to duplicate or delete the whole row ie the tr tag?如何添加 JavaScript 函数来复制或删除整行，即 tr 标签？

Currently my function looks like this:目前我的功能是这样的：

function addEdRows(){ 
    document.getElementById("edErrAlert").style.display = "none";
    var edTable = document.getElementById("edTable");
    var rowCount = edTable.rows.length;
    // var cellCount = edTable.rows[0].cells.length; 
    var row = edTable.insertRow(rowCount);
    for(var i =0; i <= rowCount; i++){
        var cell = "cell"+i;
        cell = row.insertCell(i);
        var copycel = document.getElementById("edCol"+i).innerHTML;
        cell.innerHTML=copycel;
    }
}

Currently for my Javascript function, I am also getting the following error for the line where I'm assigning a value to the copycel variable.目前对于我的 Javascript 函数，我在为 copycel 变量赋值的行中也收到以下错误。 "Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')" “未捕获的 TypeError：无法读取 null 的属性（读取 'innerHTML'）”

Answer 1

Javascript: Javascript：

function addRow(tableID) {  
    var table = document.getElementById(tableID);  
    var rowCount = table.rows.length;  
    var row = table.insertRow(rowCount);  
    //Column 1  
    var cell1 = row.insertCell(0);  
    var element1 = document.createElement("input");  
    element1.type = "button";  
    var btnName = "button" + (rowCount + 1);  
    element1.name = btnName;  
    element1.setAttribute('value', 'Delete'); // or element1.value = "button";  
    element1.onclick = function() {  
        removeRow(btnName);  
    }  
    cell1.appendChild(element1);  
    //Column 2  
    var cell2 = row.insertCell(1);  
    cell2.innerHTML = rowCount + 1;  
    //Column 3  
    var cell3 = row.insertCell(2);  
    var element3 = document.createElement("input");  
    element3.type = "text";  
    cell3.appendChild(element3);  
}  
  
function removeRow(btnName) {  
    try {  
        var table = document.getElementById('dataTable');  
        var rowCount = table.rows.length;  
        for (var i = 0; i < rowCount; i++) {  
            var row = table.rows[i];  
            var rowObj = row.cells[0].childNodes[0];  
            if (rowObj.name == btnName) {  
                table.deleteRow(i);  
                rowCount--;  
            }  
        }  
    } catch (e) {  
        alert(e);  
    }  
}

HTML: HTML：

<HTML>  
    <HEAD>  
          <TITLE> Add/Remove dynamic rows in HTML table </TITLE>  
          <SCRIPT language="javascript">  
               function addRow(tableID) {  
        var table = document.getElementById(tableID);  
        var rowCount = table.rows.length;  
        var row = table.insertRow(rowCount);  
        //Column 1  
        var cell1 = row.insertCell(0);  
        var element1 = document.createElement("input");  
        element1.type = "button";  
        var btnName = "button" + (rowCount + 1);  
        element1.name = btnName;  
        element1.setAttribute('value', 'Delete'); // or element1.value = "button";  
        element1.onclick = function () { removeRow(btnName); }  
        cell1.appendChild(element1);  
        //Column 2    
        var cell2 = row.insertCell(1);  
        cell2.innerHTML = rowCount + 1;  
        //Column 3  
        var cell3 = row.insertCell(2);  
        var element3 = document.createElement("input");  
        element3.type = "text";  
        cell3.appendChild(element3);  
    }  
    function removeRow(btnName) {  
        try {  
            var table = document.getElementById('dataTable');  
            var rowCount = table.rows.length;  
            for (var i = 0; i < rowCount; i++) {  
                var row = table.rows[i];  
                var rowrowObj = row.cells[0].childNodes[0];  
                if (rowObj.name == btnName) {  
                    table.deleteRow(i);  
                    rowCount--;  
                }  
            }  
        }  
        catch (e) {  
            alert(e);  
        }  
    }  
</SCRIPT>  
     </HEAD>  
     <H3>This demo html file provides you easiest approach to dynamically add and delete rows</H3>  
  
     <BODY>  
          <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />  
          <TABLE id="dataTable" width="350px" border="1">  
               <TR>  
                    <TD><input type="button" name="button1" value="Delete" onclick="removeRow('button1')"></TD>  
                    <TD>1</TD>  
                    <TD><input type="text" value="" name="nameTxt"></TD>  
               </TR>  
          </TABLE>  
     </BODY>  
  
</HTML>

使用 JavaScript 在 HTML 表中添加和删除行

问题描述

1 个解决方案

解决方案1
0 2022-05-25 04:44:11

使用 JavaScript 在 HTML 表中添加和删除行

问题描述

1 个解决方案

解决方案1 0 2022-05-25 04:44:11

解决方案1
0 2022-05-25 04:44:11