Question

我可能会解释一下这个问题。

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

我想做的是，而不是显示每列中的所有按钮，我只想在展开（单击）的列中显示一个按钮，也在一行中显示。

＆＃13;

$(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();
      }
    );
  }
);

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

Answer 1

size(A)

不确定我的要求是否合适。但是这只会显示您单击的列的一个按钮。正确？

Answer 2

这没有解决我的问题，它仍然显示每列中的所有按钮。而且，单击功能向上滑动是错误的，因为当我再次按下列单元格时，我无法隐藏输入。

我还将所有表格标题单元格更改为标准单元格。

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

2 个答案: