我想使用相同的按钮显示每个隐藏的行。当用户单击添加+以显示另一个隐藏的行。如果那样的话。
我正在使用此脚本隐藏除第一行以外的所有表行。
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide();
});
</script>
</script>
单击按钮（#add）一次，如果该行不可见，则显示下一行 否则保持隐藏。这对于显示一张桌子非常有效。我怎么会 可以像这样显示其余表格，而又不会一次吐出来？我希望他们一一展示。
<script type="text/javascript">
$("#add").click(function () {
if ($('tr#row2:visible').length==0)
{
$('tr#row2').show();
$("#add").attr('value','Remove');
}
else{
$('tr#row2').hide();
$("#add").attr('value','Add');
}
});
</script>
其余的代码看起来像这样，每一行都有不同的ID。
有任何想法吗？
<table width="200" border="6">
<input id="add" type="button" value="Add" style="width:70px"/>
<tr id="row1">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
答案 0 :(得分：0)
如果这不是您想要的，请告诉我，我将看看是否能为您提供帮助。至少它可以给你一些想法。
<script type='text/javascript'>
var currentRow = 2;
var previousRow = null;
var defaultRowNumber = 2; // constant: For when we need to reset current row value.
var resetRowNumberOn = 7; // constant: This looks odd but it's how the function and math works together.
$(document).ready(function () {
$('tr#row2, tr#row3, tr#row4, tr#row5, tr#row6, tr#row7, tr#row8, tr#row9, tr#row10, tr#row11').hide();
$("#add").click(function () {
ShowHideRow(currentRow)
});
var ShowHideRow = function (rowNumber) {
if ($('tr#row' + rowNumber + ' :visible').length == 0) {
$('tr#row' + rowNumber).show();
$("#add").attr('value', 'Remove');
}
else {
$("#add").attr('value', 'Add');
}
if (typeof previousRow === 'number')
$('tr#row' + (previousRow)).hide();
previousRow = currentRow;
currentRow++;
if (currentRow === resetRowNumberOn) {
currentRow = defaultRowNumber;
$('tr#row' + (previousRow)).hide();
previousRow = null;
}
}
});
</script>
<table width="200" border="6">
<input id="add" type="button" value="Add" style="width:70px" />
<tr id="row1">
<td>1 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row2">
<td>2 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row3">
<td>3 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row4">
<td>4 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr id="row5">
<td>5 </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>