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

好吧，我做了一些事情＆＃34;类似＆＃34;本周。

包含三个隐藏列的表（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();
                                           });

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

Answer 2

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

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

我猜你清楚知道你的桌子有多少行。所以，我的想法如下：

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

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

2 个答案: