单击按钮以显示隐藏的行

Question

我想问一下我有没有这样的桌子：JsFiddle

隐藏产品 BCD 的预期结果：

<table>
  <th>
     Product Detail Display
  </th>
  <tr>
     <td> ----- Product A -----</td>
  </tr>
  <tr>
     <td>
       <div class="left">Total: 4 Product(s)</div>
       <div class="right"><button>View More Products</button></div>
     </td>
  </tr>
</table>

我希望它最初只显示“产品 A”，而“产品 B、C、D”将是三个隐藏行。在我单击“查看更多产品”按钮之前，将显示“产品 B、C、D”的行。按钮将变为“查看更少的产品”，而“产品 B、C、D”将再次隐藏...

我对table属性不是很熟悉，请问是否可以这样做？我不确定<td> 属性可以处理这个......或者实际上使用<div> 和jQuery 来控制这个动作会更好？

Answer 1

我对table属性不是很熟悉，请问是否可以这样做？我不确定<td> 属性可以处理这个问题。

您不需要使用 HTML <table> 元素。根据MDN：

HTML 表格应该用于表格数据——这就是它们的设计目的。

或者实际上使用<div>和jQuery来控制这个动作会更好？

一般来说，当你可以用纯 JavaScript 轻松做某事时，不要使用 jQuery：

document.querySelector('button').addEventListener('click', function() {
  if (this.textContent == 'View More Products') {
    this.textContent = 'View Fewer Products';
  } else {
    this.textContent = 'View More Products';
  }
  document.querySelector('div').classList.toggle('hidden');
});

.hidden {
  display: none;
}

<h1>Product Detail Display</h1>
<p> ----- Product A ----- </p>
<div class="hidden">
  <p> ----- Product B ----- </p>
  <p> ----- Product C ----- </p>
  <p> ----- Product D ----- </p>
</div>
<p>Total: 4 Product(s) <button>View More Products</button></p>

Answer 2

我更新了你的 jsfiddle https://jsfiddle.net/6xfdez2x/1/

使用类来隐藏行

$('#more').on('click',function(){
    $("#tbl tr.occult").show();
  $(this).hide();
  $('#less').show();
});

$('#less').on('click',function(){
    $("#tbl tr.occult").hide();
  $(this).hide();
  $('#more').show();
});

Answer 3

使用 CSS 和 jQuery，您可以修改 button 的 $.text() 并在 click 上向表中添加一个用于切换状态并使用 CSS 隐藏/显示行的类。

var $table = $('table'),
		$button = $('button');
$button.on('click',function() {
	if ($table.hasClass('more')) {
  	$table.removeClass('more');
  	$(this).text($(this).data('more'));
  } else {
  	$table.addClass('more');
  	$(this).text($(this).data('less'));
  }
})

td{
  text-align:center;
}

.left{
  width:50%;
  float:left;
}

.right{
  width:50%;
  float:right;
  text-align: right;
}

tr:nth-child(n + 3):not(:last-child) {
  display: none;
}

.more tr:nth-child(n + 3):not(:last-child) {
  display: table-row;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
  <th>
    Product Detail Display
  </th>
  </tr>
  <tr>
    <td> ----- Product A -----</td>
  </tr>
    <tr>
    <td> ----- Product B ----- </td>
  </tr>
    <tr>
    <td> ----- Product C ----- </td>
  </tr>
    <tr>
    <td> ----- Product D ----- </td>
  </tr>
  <tr>
    <td>
      <div class="left">Total: 4 Product(s)</div>
      <div class="right"><button data-less="View Less Products" data-more="View More Products">View More Products</button></div>
    </td>
  </tr>
</table>