javascript - 如何在表格列中显示一个按钮元素

Question

我可能在解释这个问题时有点困惑。

我有一个表，如果我按表列名称，它将展开并显示输入和一个按钮。 问题首先在页面开头的每列中显示所有按钮，并且按钮在展开时显示关闭/打开。

我想要做的是，我不想在每一列中显示所有按钮，而是只想在展开(单击)的列中以及一行中显示一个按钮。

$(document).ready(
  function() {
    $('th input').slideUp();
    $('th a').click(
      function() {
        var clicks = $(this).data('clicks');
        if (clicks) {
          $(this).closest(".butt").hide();
        } else {
          $(this).closest(".butt").show();
        }
        $(this).data("clicks", !clicks);
        $(this).closest('th').find('input').slideToggle();
      }
    );
  }
);

button {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: rgba(1, 1, 1, 0.1);
  height: 30px;
  width: 70px;
}
table {
  display: block;
  width: 400px;
  font-family: Helvetica, Arial, sans-serif;
  border-spacing: 0;
  max-height: 400px;
  overflow: auto;
}
.naitamine2 table {
  position: fixed;
  width: 700px;
  height: ;
  font-family: Helvetica, Arial, sans-serif;
  border-spacing: 0;
  overflow: auto;
}
#table table {
  position: fixed;
  width: 500px;
  font-family: Helvetica, Arial, sans-serif;
  border-spacing: 0;
}
tr,
th {
  border: 1px solid #CCC;
  background-color: white;
}
th {
  background: #F3F3F3;
  font-weight: bold;
}
tr:nth-child(even) th {
  background: #4DAF7C;
}
tr:nth-child(odd) th {
  background: #FFA400;
}
tr th:hover {
  background: #666;
  color: #FFF;
}
.butt {
  margin-left: 5px;
  margin-top: -10px;
  height: 10px;
}
table.scroll {
  width: 100%;
  /* Optional */
  /* border-collapse: collapse; */
  border-spacing: 0;
  border: 2px solid black;
}
table.scroll tbody {
  height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
tbody td,
thead th {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="scroll">
  <thead>
    <tr>
      <th>Name</th>
      <th>Product</th>
      <th>Price</th>
      <th>Avaible</th>
    </tr>
  </thead>
  <tbody class='av'>
    <tr>
      <form method='POST'>
        <input type='hidden' name='id' value='$id'></input>
        <th><a>Nimi</a>
          <input name='namem' placeholder='Name'>
          <button type='submit' name='button' class='butt' value='+'></button>
          </input>
        </th>
        <th><a>JUra</a>
          <input name='productm' placeholder='Product'></input>
        </th>
        <th><a>Asi</a>
          <input name='pricem' type='number' step='1.00' placeholder='Price'></input>
        </th>
        <th><a>Ei</a>
          <input name='avaiblem' placeholder='Avaible'></input>
        </th>
      </form>
    </tr>
  </tbody>
  <tbody class='av'>
    <tr>
      <form method='POST'>
        <input type='hidden' name='id' value='$id'></input>
        <th><a>Nimi</a>
          <input name='namem' placeholder='Name'>
          <button type='submit' name='button' class='butt' value='+'></button>
          </input>
        </th>
        <th><a>JUra</a>
          <input name='productm' placeholder='Product'></input>
        </th>
        <th><a>Asi</a>
          <input name='pricem' type='number' step='1.00' placeholder='Price'></input>
        </th>
        <th><a>Ei</a>
          <input name='avaiblem' placeholder='Avaible'></input>
        </th>
      </form>
    </tr>
  </tbody>
  <tbody class='av'>
    <tr>
      <form method='POST'>
        <input type='hidden' name='id' value='$id'></input>
        <th><a>Nimi</a>
          <input name='namem' placeholder='Name'>
          <button type='submit' name='button' class='butt' value='+'></button>
          </input>
        </th>
        <th><a>JUra</a>
          <input name='productm' placeholder='Product'></input>
        </th>
        <th><a>Asi</a>
          <input name='pricem' type='number' step='1.00' placeholder='Price'></input>
        </th>
        <th><a>Ei</a>
          <input name='avaiblem' placeholder='Avaible'></input>
        </th>
      </form>
    </tr>
  </tbody>
  <table>

Answer 1

$(document).ready( function() {
    $('th input').slideUp();
    $('th a').click( function() {
        $('th input').slideUp();
        var clicks = $(this).data('clicks');
        if (clicks) {
            $(this).closest(".butt").hide();
        } else {
            $(this).closest(".butt").show();
        }
        $(this).data("clicks", !clicks);
        $(this).closest('th').find('input').slideToggle();
    });
});

不确定我是否满足您的要求。但这只会显示您单击的列的一个按钮。对吗？