Question

我正在写电话簿。在html中，我有一个div #containerAgenda，如果没有添加的联系人，则不会显示。但是，我创建了删除一行或多行的函数。因此，如果我添加然后删除所有联系人，则希望div隐藏。我不确定如何将值设置为空白或空，以便可以在deleteRow函数中应用规则.classList.remove（我添加了尝试将输入值定义为空的方式）。你能给我些提示吗？下面是我的代码：附言我是一个初学者，所以我很欣赏简单的解决方案:)

<script>
            var persoane =[]; 
            function deseneazaTabel(){
                str = ""; 
                for (var i = 0; i < persoane.length; i++){
                    str += `<tr>
                            <td>${persoane[i].name}</td>
                            <td>${persoane[i].telefon}</td>
                            <td><span class="editButton" onclick="editeaza();">EDIT</span></td>
                            <td><span class="deleteButton" onclick="deleteRow(${i});">STERGE</span></td>
                            </tr>`;
                }
                document.querySelector("table tbody").innerHTML=str;
            }
            var pers = {};
            function adaugaContact(form,event){
                event.preventDefault(); 
                var inputs = form.querySelectorAll("input[name]"); 
                for (var i=0; i<inputs.length; i++){
                    var a = inputs[i].getAttribute("name"); 
                    var v = inputs[i].value; 
                    pers[a] = v; 
                }
                persoane.push(pers); 
                document.querySelector("#containerAgenda").classList.remove("hidden"); 
                deseneazaTabel();
            }
            
            function deleteRow (idx){
                persoane.splice(idx,1);
                if(document.querySelectorAll("input[name]").value === ""){
                    document.querySelector("#containerAgenda").classList.add("hidden");
                }
                deseneazaTabel();
            }
         </script>

<body onload="deseneazaTabel();">
        <h1>AGENDA</h1>
        <form class="orangeText centerText" onsubmit="adaugaContact(this,event);">
            <label for ="name">Nume</label>
            <input type="text" name="name" id="name">
            <label for="telefon">Telefon</label>
            <input type="text" name="telefon" id="telefon">
            <br/>
            <input type="submit" class="btn" value="ADAUGA CONTACT">
        </form>
        <div id="containerAgenda" class="orangeText centerText hidden">
            <table id="inputs">
                <thead>
                    <tr>
                        <td>Nume</td>
                        <td>Telefon</td>
                        <td></td>
                        <td></td>
                    </tr>    
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </body>
</html>

Answer 1

这可以帮助您

function checkIfNoContact() {
    if(document.querySelectorAll("tr").length <= 0 ) {
     document.querySelector("#containerAgenda").classList.add("hidden");
    } else {
     document.querySelector("#containerAgenda").classList.remove("hidden");
    }
}

Answer 2

您需要的是

(persoane.length === 0) {
    document.getElementById('containerAgenda').style.display = 'none';
  } else {
    document.getElementById('containerAgenda').style.display = 'block';
  }

内部deseneazaTabel函数

我还添加了deleteAll功能，您的问题中缺少该功能，请检查演示

var persoane = [];



function deseneazaTabel() {
  if (persoane.length === 0) {
    document.getElementById('containerAgenda').style.display = 'none';
  } else {
    document.getElementById('containerAgenda').style.display = 'block';
  }
  str = "";
  for (var i = 0; i < persoane.length; i++) {
    str += `<tr>
                            <td>${persoane[i].name}</td>
                            <td>${persoane[i].telefon}</td>
                            <td><span class="editButton" onclick="editeaza();">EDIT</span></td>
                            <td><span class="deleteButton" onclick="deleteRow(${i});">STERGE</span></td>
                            </tr>`;
  }
  document.querySelector("table tbody").innerHTML = str;
}

function DeleteALL() {
  persoane = [];
  deseneazaTabel();
}
var pers = {};

function adaugaContact(form, event) {
  event.preventDefault();
  var inputs = form.querySelectorAll("input[name]");
  for (var i = 0; i < inputs.length; i++) {
    var a = inputs[i].getAttribute("name");
    var v = inputs[i].value;
    pers[a] = v;
  }
  persoane.push(pers);
  document.querySelector("#containerAgenda").classList.remove("hidden");
  deseneazaTabel();
}

function deleteRow(idx) {
  persoane.splice(idx, 1);
  if (document.querySelectorAll("input[name]").value === "") {
    document.querySelector("#containerAgenda").classList.add("hidden");
  }
  deseneazaTabel();
}

<body onload="deseneazaTabel();">
  <h1>AGENDA</h1>
  <form class="orangeText centerText" onsubmit="adaugaContact(this,event);">
    <label for="name">Nume</label>
    <input type="text" name="name" id="name">
    <label for="telefon">Telefon</label>
    <input type="text" name="telefon" id="telefon">
    <br/>
    <input type="submit" class="btn" value="ADAUGA CONTACT">
  </form>
  <input type="submit" class="btn" onClick="DeleteALL()" value="Delete ALL">
  <div id="containerAgenda" class="orangeText centerText hidden">
    <table id="inputs">
      <thead>
        <tr>
          <td>Nume</td>
          <td>Telefon</td>
          <td></td>
          <td></td>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</body>

</html>

Answer 3

您可以使用jQuery 它将检查Dockerfile中是否没有<tr>，然后隐藏<tbody>

我希望它对您有用。

div#containerAgenda

如果值为空，则隐藏div（javascript）

3 个答案: