Question

我有jscript工作，在点击时向页面添加行，我现在需要做的是每次单击删除按钮时隐藏最底部的单元格，但是单元格不能被销毁，因为如果稍后添加单元格，任何先前填充的单元格必须显示为不受影响。我的计划是我可以将主体的子节点放入一个数组中，从数组末端开始并向前工作并更改我遇到的第一个可见节点隐藏然后返回，看起来这样做我会做什么需要完成，但由于某种原因，我的函数产生任何结果....根本没有错误，没有无限循环，没有任何东西。我将在下面发布我的代码。问题是，除非在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元素，这很可能是原因它不起作用。

要解决此问题，您需要循环遍历表的子元素，如下所示：

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

在CSS中，使用display:none代替visibility:hidden

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

Html＆amp; Javascript隐藏现有表格单元格而不会破坏它们

1 个答案: