如何在單擊按鈕時顯示表格行

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>

Java腳本

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

Answer 1

好吧，本周我做了一些“類似”的事情。

表格中的信息行（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/`

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

1. 隱藏onload事件中除第一行以外的所有表行。
2. 在addNewRow函數中，我將檢查當前可見行數，並在有不可見行的情況下顯示下一行。