我的 jscript 可以在单击时向页面添加行，我现在需要做的是每次单击删除按钮时隐藏最底部的单元格，但单元格不能被破坏，因为如果稍后添加单元格，任何先前填充的单元格都必须显示为原样。我的计划是我可以将 body 的子节点放入一个数组中，从数组的末尾开始，朝前面工作，将我遇到的第一个可见节点更改为隐藏，然后返回，看来这会做我想做的事需要完成，但由于某种原因，我的函数正在产生任何结果......根本没有错误，没有无限循环，什么都没有。我将在下面发布我的代码。问题是，除非在 removeFields() 函数中某处出现粗心错误。我很难过。
CSS:
body{
background-color: #2a334d;
font: 15px/1.5 Arial, Helvetica, sans-serif;
}
.container{
padding:45px;
width:80%;
color:#e8491d;
border-color: #ffffff;
border-width: medium;
border:solid;
min-height: none;
}
table{
align-content: center;
width:80%;
margin-bottom: 35px;
padding-left: 175px;
}
.shown{
visibility: visible;
}
.hidden{
visibility: hidden;
}
footer{
padding:10px;
margin-top:50px;
color: #ffffff;
text-align: center;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css"></link>
<script type="text/javascript" src="functions.js"></script>
<title>assignment 3</title>
</head>
<body id="body">
<div class="container">
<table id="test" class="centered">
<th>Number</th>
<th>Text</th>
<th>Length</th>
<tr id="table" class="shown">
<th><a id="number">1</a></th>
<th><input id="text" onkeyup="countLength()"></input></th>
<th><span id="length">0</span></th>
</tr>
</table>
<footer>
<tr>
<button class="addElement" onclick="addField('table')">add</button>
<button class="removeElement" onclick="removeField()">remove</button>
<button class="sortElements" onclick="sortFields()">sort</button>
</tr>
</footer>
</div>
</body>
</html>
JavaScript:
var fieldCount = 1;
function countLength(){
for(i= 0; i< fieldCount; i++){
document.getElementsByTagName('span')[i].innerHTML=document.getElementsByTagName('input')[i].value.length;
}
}
function addField(){
var array = document.body.childNodes;
for(i = 0; i< array.length ; i++){
if(array[i].className == "hidden"){
array[i].className = 'shown';
return;
}
}
var lastTr = document.getElementById("table");
var cloneTr = lastTr.cloneNode(true);
cloneTr.getElementsByTagName('a')[0].innerHTML = fieldCount+1;
cloneTr.getElementsByTagName('input')[0].value = '';
cloneTr.getElementsByTagName('span')[0].innerHTML = 0;
document.getElementById("test").append(cloneTr);
document.getElementsByTagName('input')[fieldCount].addEventListener("keyup", countLength());
document.getElementsByTagName('input')[fieldCount].className = "shown";
fieldCount++;
}
function removeField(){
var array = document.body.childNodes;
for(var tmp = array.length-1; tmp>=0 ; tmp--){
if(array[tmp].className == "shown"){
array[tmp].className = 'hidden';
return;
}
}
}
最佳答案
您确定应隐藏哪个单元格的方法无效。 array[tmp].className == "shown" 行永远不会返回 true，因为 array[tmp].className 的值为 undefined 在循环的每个实例上，查看 div 时除外。
此外，它看起来像 document.body.childNodes 只是获取 body 元素的直接后代，而不是所有后代，所以它永远不会看到 tr 元素，这很可能是它不起作用的原因。
为了解决这个问题，您需要遍历表格的子元素，如下所示:
var table = document.getElementById("测试");
var array = table.childNodes;
并且在您的 CSS 中，使用 display:none 而不是 visibility:hidden
顺便说一句，每个 tr 元素都有相同的 id 值。 id 在页面中应该是唯一的。
关于javascript - Html 和 Javascript 隐藏现有表格单元格而不破坏它们，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42516307/