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>

我希望它最初只显示＆＃34;产品A＆＃34;和＆＃34;产品B，C，D＆＃34;将是三个隐藏的行。直到我点击按钮＆＃34;查看更多产品＆＃34;，行＆＃34;产品B，C，D＆＃34;将显示。按钮将变为＆＃34;查看更少的产品＆＃34;而产品B，C，D＆＃34;将再次隐藏......

我不太熟悉table属性，所以我想问一下是否可以这样做？我不确定<td>属性可以解决这个问题......或者实际上使用<div>和jQuery控制此操作会更好吗？

Answer 1

使用CSS和jQuery修改$.text()的{{1}}并在button上添加一个类来切换状态并使用CSS隐藏/显示行。< / p>

click

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;
}

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

我不太熟悉table属性，所以我想问一下是否可以这样做？我不确定<td>属性是否可以处理此问题。

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

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

或者实际上最好使用<div>和jQuery来控制此操作？

作为一般规则，当您可以使用纯JavaScript轻松执行某些操作时，请不要使用jQuery：

＆＃13;

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');
});

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<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>

＆＃13;

单击按钮以显示隐藏的行

3 个答案: