通過唯一ID添加/顯示每一行
[英]Add/show each row by unique ID
問題描述
我想使用相同的按鈕顯示每個隱藏的行。 當用戶單擊添加+以顯示另一個隱藏的行。 如果那樣做。
我正在使用此腳本隱藏除第一行以外的所有表行。
<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>
1 個解決方案
解決方案1
0 已采納 2018-09-11 22:45:04
如果這不是您想要的，請告訴我，我將幫您解決。 至少它可以給你一些想法。
<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>
向每行添加唯一的ID以根據列值隱藏/顯示表行-Laravel-javascript
[英]Adding unique id to each row to hide/show table row based on column value - Laravel - javascript
在每行jquery / coffeescript中的每個td中添加唯一的類
[英]Add unique class to each td in each row jquery/coffeescript
jQuery / JavaScript：為表中的每一行避免唯一的ID？
[英]jQuery/JavaScript: Avoid unique ID's for each row in a table?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.