如何停止删除我的表的原始/第一行这个JavaScript代码？

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

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, td { 
 
\t 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>

来源

2017-07-25 Allen D.

不完全相关，但现在是学习[loops]的时候了（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for）...更多related：'row.insertCell（0）.contentEditable = true;'返回'true'，而不是新创建的单元格。将'innerHTML'添加到布尔值是没有用的。 – Teemu

只是确认有超过1 tr表中删除之前：

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

全部代码，代码片段：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, td { 
 
\t 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>

来源

2017-07-25 20:26:02

非常感谢大家的帮助。我意识到我是新手，所以我更感谢专家们花时间来帮助我。 –

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

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); 
    } 
}

来源

2017-07-25 20:30:37 DeadLock

如果答案解决了原始问题，请将其标记为已接受:) – DeadLock

如何停止删除我的表的原始/第一行这个JavaScript代码？

回答

相关问题