Question

我有一张表，其中一行用于用户输入。我希望默认情况下隐藏此行，并在按下按钮时显示该行。可悲的是我无法正常工作。

这是我的尝试：

HTML表格

<tbody class="txlist" id="data_table">
           <tr id="addtx">
             <td><input type="date" id="new_date" placeholder="Date"></td>
             <td><input type="text" id="new_account" placeholder="Account"></td>
             <td><input type="text" id="new_category" placeholder="Category"></td>
             <td><input type="text" id="new_amount" placeholder="Amount"></td>
             <td><input type="button" id="save_button3" value="✔" class="save1" onclick="add_row();">
             <input type="button" value="?" class="delete" onclick="nonew()"></td>
           </tr>
...

HTML按钮


<button class="float" id="addnewtx" onclick="addnewtx">
         <a>+</a>
       </button>

CSS

#addtx{
  display: none;
}

JS

function addnewtx(){
  document.getElementById("addtx").style.display="inline-block";
}

Answer 1

可能在按钮的onclick方法调用中，您还应该使用括号，我的意思是：

onclick="addnewtx();"

分号不是强制性的，但始终是一种好习惯。

Answer 2

尝试使用table-row

function addnewtx(){
  document.getElementById("addtx").style.display="table-row";
}

Answer 3

这是您的问题解决方案。

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <title>table</title> 
    <style type="text/css">
      #addtx{
        display: none;
      }
    </style>
</head> 
  
<body> 
<button class="float" id="addnewtx" onclick="addnewtx()">
 <a>+</a>
</button>
<table>
  <tbody class="tbl-body">
  </tbody>
</table>
</body> 
  <script>
    var count = 0;
    function addnewtx(){

      var html = `<tr id="addtx${count}" class="tbl-row" style="display: inline-block;">
      <td><input type="date" id="new_date" placeholder="Date"></td>
      <td><input type="text" id="new_account" placeholder="Account"></td>
      <td><input type="text" id="new_category" placeholder="Category"></td>
      <td><input type="text" id="new_amount" placeholder="Amount"></td>
      <td><input type="button" id="save_button3" value="✔" class="save1" onclick="add_row();">
      <input type="button" value="?" class="delete" onclick="nonew(${count})"></td>
    </tr>`;
      var node = document.getElementsByClassName("tbl-body")[0].innerHTML;
      document.getElementsByClassName("tbl-body")[0].innerHTML  = node + html;
      // document.getElementById("addtx").style.display="inline-block";
      count++;
    }

    function nonew(count)
    {
      document.getElementById("addtx"+count).remove();
    }
  </script>
</html>

something more

默认情况下隐藏表格行-按钮以显示？

3 个答案: