表格行的编辑/保存按钮的可见性问题 (JS)

Question

您好，我正在尝试为预算跟踪应用程序构建一个包含输入的表格。我在 JS 上遇到了一些麻烦。本质上，我希望用户能够添加、编辑和保存行。我只希望保存或编辑按钮一次可见。这在编辑并保存一行后有效，但默认情况下它会显示所有按钮。同样，在编辑一行之后，按钮不再排成一行，而是堆叠在彼此之上。任何帮助将非常感激。这是我第一次使用 JS。我的代码<div>  <!-- ... -->  <div class="five">    <h1>Transactions</h1>    <div class="txlist">      <table cellspacing="0" cellpadding="0" border="0" width="1500">        <thead>          <th>Date</th>          <th>Account</th>          <th>Category</th>          <th>Amount</th>          <th></th>        </thead>        <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="Save" class="save" onclick="add_row();">              <input type="button" value="🗙" class="delete" onclick="nonew()">            </td>          </tr>          <tr id="row1">            <td id="date_row1">24.08.2020</td>            <td id="account_row1">Credit Card</td>            <td id="category_row1">Expense: Restaurants</td>            <td id="amount_row1">- $32.45</td>            <td>              <input type="button" id="edit_button1" value="Edit" class="edt" onclick="edit_row('1')">              <input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">              <input type="button" value="🗙" class="delete" onclick="delete_row('1')">            </td>          </tr>

Answer 1

我认为有更好的方法可以实现这一点，但同样，您的问题是在保存和编辑时您正在将按钮的 style.display 属性更改为

document.getElementById("edit_button"+no).style.display="block";

你需要保留

document.getElementById("edit_button"+no).style.display="inline-block";

Answer 2

您共享的标记已损坏。我看到 2 个开始<table>标签和 3 个结束</table>标签。你能分享正确的标记或最少的工作代码吗？