Question

使用该代码，您可以看到创建新行，然后删除它们很容易。我遇到的问题是默认/原点/第一行（A-T）也将删除 - 我需要阻止此行删除。可以这样做吗？

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
	background-color: #4CAF50;
    color: white;
    border: 1px solid black;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
</style>
</head>
<body>
<table id="myTable1">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
    <td>K</td>
    <td>L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
    <td>P</td>
    <td>Q</td>
    <td>R</td>
    <td>S</td>
    <td>T</td>
  </tr>
</table>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<script>

function myCreateFunction() {
    var table = document.getElementById("myTable1");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0).contentEditable = true;
    var cell2 = row.insertCell(1).contentEditable = true;
    var cell3 = row.insertCell(2).contentEditable = false;
    var cell4 = row.insertCell(3).contentEditable = false;
    var cell5 = row.insertCell(4).contentEditable = true;
    var cell6 = row.insertCell(5).contentEditable = false;
    var cell7 = row.insertCell(6).contentEditable = true;
    var cell8 = row.insertCell(7).contentEditable = false;
    var cell9 = row.insertCell(8).contentEditable = false;
    var cell10 = row.insertCell(9).contentEditable = false;
    var cell11 = row.insertCell(10).contentEditable = false;
    var cell12 = row.insertCell(11).contentEditable = false;
    var cell13 = row.insertCell(12).contentEditable = false;
    var cell14 = row.insertCell(13).contentEditable = false;
    var cell15 = row.insertCell(14).contentEditable = false;
    var cell16 = row.insertCell(15).contentEditable = false;
    var cell17 = row.insertCell(16).contentEditable = false;
    var cell18 = row.insertCell(17).contentEditable = false;
    var cell19 = row.insertCell(18).contentEditable = false;
    var cell20 = row.insertCell(19).contentEditable = false;
    cell1.innerHTML = "";
    cell2.innerHTML = "";
    cell3.innerHTML = "";
    cell4.innerHTML = "";
    cell5.innerHTML = "";
    cell6.innerHTML = "";
    cell7.innerHTML = "";
    cell8.innerHTML = "";
    cell9.innerHTML = "";
    cell10.innerHTML = "";
    cell11.innerHTML = "";
    cell12.innerHTML = "";
    cell13.innerHTML = "";
    cell14.innerHTML = "";
    cell15.innerHTML = "";
    cell16.innerHTML = "";
    cell17.innerHTML = "";
    cell18.innerHTML = "";
    cell19.innerHTML = "";
    cell20.innerHTML = "";

}

function myDeleteFunction() {
    document.getElementById("myTable1").deleteRow(-1);
}

</script>
</body>
</html>

＆＃13;

Answer 1

您当前的删除功能会盲目地删除表格的最后一行。

function myDeleteFunction() {
    document.getElementById("myTable1").deleteRow(-1);
}

如果您要保留第一行，则在删除最后一行之前，请确保该表有多于一行。

function myDeleteFunction() {
    // There are at least 2 or more rows. So the last one can be deleted
    if(document.getElementById("myTable1").rows.length > 1){
        document.getElementById("myTable1").deleteRow(-1);
    }
}

Answer 2

在删除之前，只需验证表格中有多个tr：

if (document.getElementById("myTable1").getElementsByTagName('tr').length > 1) {
    document.getElementById("myTable1").deleteRow(-1);
}

完整代码，代码片段：

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
	background-color: #4CAF50;
    color: white;
    border: 1px solid black;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
</style>
</head>
<body>
<table id="myTable1">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
    <td>K</td>
    <td>L</td>
    <td>M</td>
    <td>N</td>
    <td>O</td>
    <td>P</td>
    <td>Q</td>
    <td>R</td>
    <td>S</td>
    <td>T</td>
  </tr>
</table>
<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<script>

function myCreateFunction() {
    var table = document.getElementById("myTable1");
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0).contentEditable = true;
    var cell2 = row.insertCell(1).contentEditable = true;
    var cell3 = row.insertCell(2).contentEditable = false;
    var cell4 = row.insertCell(3).contentEditable = false;
    var cell5 = row.insertCell(4).contentEditable = true;
    var cell6 = row.insertCell(5).contentEditable = false;
    var cell7 = row.insertCell(6).contentEditable = true;
    var cell8 = row.insertCell(7).contentEditable = false;
    var cell9 = row.insertCell(8).contentEditable = false;
    var cell10 = row.insertCell(9).contentEditable = false;
    var cell11 = row.insertCell(10).contentEditable = false;
    var cell12 = row.insertCell(11).contentEditable = false;
    var cell13 = row.insertCell(12).contentEditable = false;
    var cell14 = row.insertCell(13).contentEditable = false;
    var cell15 = row.insertCell(14).contentEditable = false;
    var cell16 = row.insertCell(15).contentEditable = false;
    var cell17 = row.insertCell(16).contentEditable = false;
    var cell18 = row.insertCell(17).contentEditable = false;
    var cell19 = row.insertCell(18).contentEditable = false;
    var cell20 = row.insertCell(19).contentEditable = false;
    cell1.innerHTML = "";
    cell2.innerHTML = "";
    cell3.innerHTML = "";
    cell4.innerHTML = "";
    cell5.innerHTML = "";
    cell6.innerHTML = "";
    cell7.innerHTML = "";
    cell8.innerHTML = "";
    cell9.innerHTML = "";
    cell10.innerHTML = "";
    cell11.innerHTML = "";
    cell12.innerHTML = "";
    cell13.innerHTML = "";
    cell14.innerHTML = "";
    cell15.innerHTML = "";
    cell16.innerHTML = "";
    cell17.innerHTML = "";
    cell18.innerHTML = "";
    cell19.innerHTML = "";
    cell20.innerHTML = "";

}

function myDeleteFunction() {
     
    if (document.getElementById("myTable1").getElementsByTagName('tr').length > 1) {
        document.getElementById("myTable1").deleteRow(-1);
    }
}

</script>
</body>
</html>

＆＃13;

如何阻止此javascript代码删除表格的原点/第一行？

2 个答案: