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

Stack Overflow用户

提问于 2017-01-26 11:38:59

回答 2查看 173关注 0票数 1

我可能在解释这个问题时搞砸了。

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

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

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

javascript

jquery

html-table

跨境电商上云解决方案

轻量应用服务器助力卖家与独立站拓展跨境电商业务

回答 2

Stack Overflow用户

发布于 2017-01-26 14:36:13

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