表格行的编辑/保存按钮的可见性问题 (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>标签。你能分享正确的标记或最少的工作代码吗？