我在页面上有多个表格。 每个表有10行以上。 设计是在每张桌子上显示第一行，并显示更多＆＃39;按钮。 用户点击show more按钮后。 它将仅展开单击表上的隐藏行。
有什么好主意的吗？
css似乎很难实现，因为页面上有多个表。
我的想法是在每张桌子上放置toogle按钮。 这将拦截点击触发器。并找到最近的父表。 最后，更改表中的所有行样式。来自display：none to show。
答案 0 :(得分：3)
由于您没有给我们太多帮助，我们会假设您的切换按钮会紧跟在您的桌子后面。
我给了你三种选择。 没有Jquery ， Jquery 和 CSS 有点黑客攻击。
没有Jquery
var toggleButtons = document.getElementsByClassName("toggleTable");
for (var i = 0; i < toggleButtons.length; i++) {
toggleButtons[i].addEventListener('click', function() {
this.previousElementSibling.classList.toggle('collapsed');
}, false);
}/*Change nth-child as required*/
table.collapsed>tbody>tr:nth-child(n+2) {
display: none;
}<table class="collapsed">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</tbody>
</table>
<input type="button" value="Toggle Rows" class="toggleTable">
支持问题，这将在IE 9及更低版本中出现问题，其他主流浏览器应该没问题。
http://caniuse.com/#feat=getelementsbyclassname
http://caniuse.com/#feat=addeventlistener
https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling
http://caniuse.com/#search=classList
Jquery - 解决上面的支持问题。
$(".toggleTable").click(function(){
$(this).prev("table").toggleClass("collapsed");
});/*Change nth-child as required*/
table.collapsed>tbody>tr:nth-child(n+2)
{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="collapsed">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</tbody>
</table>
<input type="button" value="Toggle Rows" class="toggleTable">
仅限CSS - 有点黑客攻击。您需要为每个复选框和相关标签生成ID。在这种情况下，按钮必须位于表格之前。
/*Use CSS to hide the rows of the table that is next to check box that is next to an element with a class of tableToggle*/
.tableToggle + input[type="checkbox"]:checked + table>tbody>tr:nth-child(n+2) {
display: none;
}
/*Hide the checkbox*/
.tableToggle + input[type="checkbox"] {display:none;}
/*Button Styling only -- noting important here*/
.tableToggle{
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
padding:5px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}<label class="tableToggle" for="cb1">Toggle Rows</label><input id="cb1" type="checkbox" checked="checked">
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>R1 C1</td>
<td>R1 C2</td>
<td>R1 C3</td>
</tr>
<tr>
<td>R2 C1</td>
<td>R2 C2</td>
<td>R2 C3</td>
</tr>
<tr>
<td>R3 C1</td>
<td>R3 C2</td>
<td>R3 C3</td>
</tr>
</tbody>
</table>
答案 1 :(得分：1)
尝试这种方式：
$('.btnShow').click(function () {
$(this).prev("table").find("tr.expand").toggle();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Mobile No</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Taylor</td>
<td>123456789</td>
</tr>
<tr class="expand" style="display:none">
<td>2</td>
<td>Smith</td>
<td>456789</td>
</tr>
<tr class="expand" style="display:none">
<td>3</td>
<td>Mr. Patel</td>
<td>456789</td>
</tr>
<tr class="expand" style="display:none">
<td>4</td>
<td>Nirav</td>
<td>987654321</td>
</tr>
</tbody>
</table>
<input type="button" value="Show / Hide" class="btnShow" />
答案 2 :(得分：1)
除非您决定使用像jQuery这样的库，否则这将需要相当数量的代码。抽象出显示和隐藏元素等某些功能有助于减少膨胀：
function hide (e) { e.style.display = 'none' }
function show (e) { e.style.display = '' }
function additionalRows (table) {
return [].slice.call(table.rows, +table.getAttribute('data-initial-rows'))
}
function insertAfter (e, reference) {
reference.parentNode[reference.nextSibling ? 'insertBefore' : 'appendChild'](e, reference.nextSibling)
}
function showAll () {
additionalRows(this.previousSibling).forEach(show)
this.parentNode.removeChild(this)
}
var template = document.createElement('button')
template.textContent = 'Show All'
document.querySelectorAll('.expandable-table').forEach(function (table) {
additionalRows(table).forEach(hide)
var button = template.cloneNode(true)
button.addEventListener('click', showAll)
insertAfter(button, table)
})<table class="expandable-table" data-initial-rows="10">
<thead>
<tr><th>X</th><th>Y</th></tr>
</thead>
<tr><td>7.34</td><td>9.56</td></tr>
<tr><td>5.64</td><td>4.14</td></tr>
<tr><td>0.99</td><td>8.55</td></tr>
<tr><td>9.18</td><td>8.65</td></tr>
<tr><td>6.60</td><td>3.25</td></tr>
<tr><td>8.88</td><td>5.29</td></tr>
<tr><td>0.40</td><td>5.36</td></tr>
<tr><td>9.74</td><td>7.14</td></tr>
<tr><td>7.61</td><td>6.32</td></tr>
<tr><td>3.87</td><td>2.80</td></tr>
<tr><td>0.77</td><td>0.11</td></tr>
<tr><td>8.78</td><td>5.45</td></tr>
<tr><td>2.40</td><td>7.54</td></tr>
<tr><td>6.53</td><td>1.45</td></tr>
<tr><td>7.92</td><td>1.90</td></tr>
<tr><td>1.81</td><td>4.69</td></tr>
<tr><td>9.40</td><td>7.86</td></tr>
<tr><td>3.33</td><td>5.08</td></tr>
<tr><td>0.18</td><td>3.16</td></tr>
<tr><td>1.54</td><td>0.80</td></tr>
</table>