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

How to show table row on button click

本文关键字：显示 表格 单击 按钮      更新时间：2023-09-26

我有一个包含几行的表，除了第一行之外，所有行都被隐藏了。我添加了一个按钮，我希望用户能够单击该按钮以单独显示表格的更多行。但是，我无法将这些行追加到表中，因为这会增加整体行数并丢弃打印样式表。我不是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>

爪哇语

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

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

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

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

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

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

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

  1. 在加载事件时隐藏表的所有行，但第一行除外。
  2. 在addNewRow函数中，我将检查当前可见的行数，如果有任何不可见的行，则显示下一行。
相关文章：