Jquery 单击按钮以显示隐藏行

我想问一下，我是否可以有这样一张桌子：

隐藏产品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-----
总数：4件产品
查看更多产品

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

---

我不太熟悉table属性，因此我想问一下是否可以这样做？我不确定

属性是否可以处理此问题。。。或者实际上最好使用

和jQuery来控制此操作

使用CSS和jQuery可以修改

按钮的
$.text（）
，然后在
上单击
向表中添加一个类，该类切换状态并使用CSS隐藏/显示行


var$table=$（'table'），
$button=$（'button'）；
$button.on（'click'，function（）{
if（$table.hasClass（'more'））{
$table.removeClass（'more'）；
$（this.text（$（this.data（'more'））；
}否则{
$table.addClass（'more'）；
$（this.text（$（this.data（'less'））；
}
})
td{
文本对齐：居中；
}
.左{
宽度：50%；
浮动：左；
}
.对{
宽度：50%；
浮动：对；
文本对齐：右对齐；
}
tr:n第n个子项（n+3）：非（：最后一个子项）{
显示：无；
}
.更多tr:n个孩子（n+3）：不是（：最后一个孩子）{
显示：表格行；
}

产品详细信息显示
-----产品A-----
-----产品B-----
-----产品C-----
-----产品D-----
总数：4件产品
查看更多产品
使用CSS和jQuery可以修改
按钮的
$.text（）
，然后在
上单击
向表中添加一个类，该类切换状态并使用CSS隐藏/显示行


var$table=$（'table'），
$button=$（'button'）；
$button.on（'click'，function（）{
if（$table.hasClass（'more'））{
$table.removeClass（'more'）；
$（this.text（$（this.data（'more'））；
}否则{
$table.addClass（'more'）；
$（this.text（$（this.data（'less'））；
}
})
td{
文本对齐：居中；
}
.左{
宽度：50%；
浮动：左；
}
.对{
宽度：50%；
浮动：对；
文本对齐：右对齐；
}
tr:n第n个子项（n+3）：非（：最后一个子项）{
显示：无；
}
.更多tr:n个孩子（n+3）：不是（：最后一个孩子）{
显示：表格行；
}

产品详细信息显示
-----产品A-----
-----产品B-----
-----产品C-----
-----产品D-----
总数：4件产品
查看更多产品
我更新了你的JSFIDLE

使用类隐藏行

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

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

我更新了你的JSFIDLE

使用类隐藏行

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

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

我不太熟悉table属性，因此我想问一下是否可以这样做？我不确定
属性是否可以处理这个问题

您不需要使用HTML
元素。根据：

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



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

一般来说，当您可以轻松使用普通JavaScript执行某些操作时，不要使用jQuery：


document.querySelector（'button'）。addEventListener（'click'，function（）{
如果（this.textContent==“查看更多产品”）{
this.textContent='查看较少的产品'；
}否则{
this.textContent='查看更多产品'；
}
document.querySelector（'div'）.classList.toggle（'hidden'）；
});
。隐藏{
显示：无；
}
产品详细信息显示
-----产品A-----

-----产品B-----

----产品C---

-----产品D-----

总计：4个产品查看更多产品

我不太熟悉table属性，因此我想问一下是否可以这样做？我不确定
属性是否可以处理这个问题

您不需要使用HTML
元素。根据：

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



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

一般来说，当您可以轻松使用普通JavaScript执行某些操作时，不要使用jQuery：


document.querySelector（'button'）。addEventListener（'click'，function（）{
如果（this.textContent==“查看更多产品”）{
this.textContent='查看较少的产品'；
}否则{
this.textContent='查看更多产品'；
}
document.querySelector（'div'）.classList.toggle（'hidden'）；
});
。隐藏{
显示：无；
}
产品详细信息显示
-----产品A-----

-----产品B-----

----产品C---

-----产品D-----

总计：4个产品查看更多产品
谢谢！它起作用了！请问在调用脚本文件时添加“integrity”和“crossorigin”有什么用？我在复制jquery源代码时忘了删除它们，本文对此进行了解释，谢谢！它起作用了！请问在调用脚本文件时添加“integrity”和“crossorigin”有什么用？我在复制jquery源代码时忘了删除它们，本文对此进行了解释，谢谢！它起作用了！这样一个好的和先进的参考为我！谢谢大家!@萨米：不客气：）我很好奇你为什么选择另一个答案作为解决方案？在我看来，这不是一个很好的解决方案，但如果它对你更有效，你介意告诉我为什么吗？只是出于好奇，所以我知道