如何在按钮单击时显示表格行

Question

我有一个包含几行的表，除了第一行之外，所有行都是隐藏的。我添加了一个按钮，我希望用户能够单击该按钮以单独显示表格的更多行。但是，我不能将这些行附加到表中，因为这会增加整体的行数并丢弃打印样式表。我在 Javscript 方面不是最好的，但我希望有一种方法可以使用 Javascript 或 jQuery 来单击按钮并显示下一个表格行，如果需要另一个表格行，用户可以再次单击“添加更多”按钮显示下一个表格行。我已经在 HTML 中列出了最大表格行数。

http://jsfiddle.net/jasonniebauer/j5agK/2/

HTML

<table id="processing_table">
<tr>
<td class="table_label">
    Quantity
</td>
<td class="table_qty">
    <input type="text" id="qty1" placeholder="Qty"/>
</td>
<td class="table_label">
    Description <span id="processing_small_header">(Vendor, Model/Name, and Version)</span>
</td>
<td class="table_description">
    <input type="text" id="description1" placeholder="Description"/>
</td>
<td class="table_label">
    Connection
</td>
<td class="table_connection">
    <input type="text" id="connection1" placeholder="Type"/>
</td>
<td class="table_label">
    Template
</td>
<td class="table_template">
    <input type="text" id="template1" placeholder="Template"/>
</td>
</tr>
<tr>
<td class="table_label">
    Quantity
</td>
<td class="table_qty">
    <input type="text" id="qty2" name="more_fields" placeholder="Qty"/>
</td>
<td class="table_label">
    Description <span id="processing_small_header">(Vendor, Model/Name, and Version)</span>
</td>
<td class="table_description">
    <input type="text" id="description2" name="more_fields" placeholder="Description"/>
</td>
<td class="table_label">
    Connection
</td>
<td class="table_connection">
    <input type="text" id="connection2" name="more_fields" placeholder="Type"/>
</td>
<td class="table_label">
    Template
</td>
<td class="table_template">
    <input type="text" id="template2" name="more_fields" placeholder="Template"/>
</td>
</tr>
<tr>
<td class="table_label">
    Quantity
</td>
<td class="table_qty">
    <input type="text" id="qty3" placeholder="Qty"/>
</td>
<td class="table_label">
    Description <span id="processing_small_header">(Vendor, Model/Name, and Version)</span>
</td>
<td class="table_description">
    <input type="text" id="description3" placeholder="Description"/>
</td>
<td class="table_label">
    Connection
</td>
<td class="table_connection">
    <input type="text" id="connection3" placeholder="Type"/>
</td>
<td class="table_label">
    Template
</td>
<td class="table_template">
    <input type="text" id="template3" placeholder="Template"/>
</td>
</tr>
<tr>
<td class="table_label">
    Quantity
</td>
<td class="table_qty">
    <input type="text" id="qty4" placeholder="Qty"/>
</td>
<td class="table_label">
    Description <span id="processing_small_header">(Vendor, Model/Name, and Version)</span>
</td>
<td class="table_description">
    <input type="text" id="description4" placeholder="Description"/>
</td>
<td class="table_label">
    Connection
</td>
<td class="table_connection">
    <input type="text" id="connection4" placeholder="Type"/>
</td>
<td class="table_label">
    Template
</td>
<td class="table_template"/>
    <input type="text" id="template4" placeholder="Template"/>
</td>
</tr>
<tr>
<td class="table_label">
    Quantity
</td>
<td class="table_qty">
    <input type="text" id="qty5" placeholder="Qty"/>
</td>
<td class="table_label">
    Description <span id="processing_small_header">(Vendor, Model/Name, and Version)</span>
</td>
<td class="table_description">
    <input type="text" id="description5" placeholder="Description"/>
</td>
<td class="table_label">
    Connection
</td>
<td class="table_connection">
    <input type="text" id="connection5" placeholder="Type"/>
</td>
<td class="table_label">
    Template
</td>
<td class="table_template">
    <input type="text" id="template5" placeholder="Template"/>
</td>
</tr>
<tr>
<td class="table_label">
    Quantity
</td>
<td class="table_qty">
    <input type="text" id="qty6" placeholder="Qty"/>
</td>
<td class="table_label">
    Description <span id="processing_small_header">(Vendor, Model/Name, and Version)</span>
</td>
<td class="table_description">
    <input type="text" id="description6" placeholder="Description"/>
</td>
<td class="table_label">
    Connection
</td>
<td class="table_connection">
    <input type="text" id="connection6" placeholder="Type"/>
</td>
<td class="table_label">
    Template
</td>
<td class="table_template">
    <input type="text" id="template6" placeholder="Template"/>
</td>
</tr>
</table>

Javascript

$('#add_more').click(function() {
document.getElementById('#processing_table tr').style.display = "block";
});

Answer 1

我已经创建了一个 CodePen，请看一下。

`https://codepen.io/trgiangvp3/full/PKKMWr/`

我假设您清楚地知道您的表格有多少行。 所以，我的想法如下：

1. 在 onload 事件中隐藏除第一行之外的所有表格行。
2. 在 addNewRow 函数中，我将检查当前可见行数，如果有任何行不可见，则显示下一行。

Answer 2

嗯，这周我做了一些“类似”的事情。

表格中的一行信息（7 列），包含三个隐藏列。 您会在滚动 div 中看到表格，当您滚动行时，屏幕右下角的 div 会显示隐藏的列。你可能会适应类似的东西。

HTML 很简单，类似这样：

<table>
  <thead>
    <tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
  </thead>
  <tbody>
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td id='XX" display:none>....
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td id='XX" display:none>....
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td id='XX" display:none>....
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td id='XX" display:none>....
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td id='XX" display:none>....
  </tbody>
</table>

CSS 使用它来设置每一列的样式：

#centraltable tbody td:nth-child(2) {
    width: 6em;
    text-align: center;}

这里是js：

$('.rolloverdiv').hide();


$('#centraltable tbody tr').mouseover(function(){
      $('.rolloverdiv').show();
            var appcomments = $(this).find('#comm').html();
      $('.rolloverdiv').html("Comments: <span class='span1'>" + appcomments + "</span>");
                                           });

$('#centraltable tbody tr').mouseout(function(e){
                                           $('.rolloverdiv').hide();
                                           });

这是尼安德特人的代码，但它有效。