Html & Javascript 隐藏现有的 table 细胞而不破坏它们

Question

我的 jscript 可以在点击时向页面添加行，我现在需要做的是每次点击删除按钮时隐藏最底部的单元格，但单元格不能被破坏因为如果稍后添加单元格，任何先前填充的单元格都必须原封不动地显示出来。我的计划是我可以将 body 的子节点放入一个数组中，从数组的末尾开始，朝前面工作，将我遇到的第一个可见节点更改为隐藏，然后 return，看起来像这样会做我需要做的事，但由于某种原因，我的函数正在产生任何结果......根本没有错误，没有无限循环，什么都没有。我将在下面 post 我的代码。问题是，除非在 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;
      }
    }
  }

Answer 1

您确定应隐藏哪个单元格的方法无效。 array[tmp].className == "shown" 行永远不会返回 true，因为 array[tmp].className 在循环的每个实例上都有一个值 undefined，除了查看 div.

此外，看起来 document.body.childNodes 只获取 body 元素的直接后代，而不是所有后代，所以它永远不会看到 tr 元素，这很可能它不起作用的原因。

为了解决这个问题，您想遍历 table 的子元素，像这样：

var table = document.getElementById("test"); var array = table.childNodes;

并且在您的 CSS 中，使用 display:none 而不是 visibility:hidden

顺便说一句，每个 tr 元素具有相同的 id 值。 id 在一个页面中应该是唯一的。

Html & Javascript 隐藏现有的 table 细胞而不破坏它们

Html & Javascript hiding existing table cells without destroying them

html

javascript

css

hidden

html-table