[英]hide and show table row in loop
循环中的表格编辑按钮正在隐藏,并在每次单击编辑按钮时显示表格的第一行。 我需要使用自己的编辑按钮来隐藏和显示循环中的每一行。
<?php
$counter = 0;
foreach($db->getRecordSet($sqlRecord) as $row){ $counter += 1;
?>
<tr id="rowDetails">
<td> <?php echo($counter); ?> </td>
<td > <?php echo($row['item_code']); ?> </td>
<td > <?php echo($row['item_name']); ?> </td>
<td > <?php echo($row['description']); ?> </td>
<td > <?php echo($row['quantity']); ?> </td>
<td > <?php echo($row['p_cost']); ?> </td>
<td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>
</td>
</tr>
<tr id="editContent" style="display:none;">
<td class="w10" id="row1"><input type="text" class="form-control" name="item_code" id="item_code" value="<?php echo($row['item_code']); ?>" required="required" /></td>
</tr>
<?php
}
?>
</tr>
<?php } ?>
</table>
-------------------------
function hideRow(){
if(
document.getElementById('editContent').style.display=='none') {
document.getElementById('editContent').style.display='';
document.getElementById('rowDetails').style.display='none';
} else {
document.getElementById('editContent').style.display='none';
document.getElementById('rowDetails').style.display='';
}
尝试使用jQuery的兄弟。
更改以下代码行:
<td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>
至 :
<td ><input type="button" name="edit" class="hide_button" /></td>
然后更改:
function hideRow(){
if(
document.getElementById('editContent').style.display=='none') {
document.getElementById('editContent').style.display='';
document.getElementById('rowDetails').style.display='none';
} else {
document.getElementById('editContent').style.display='none';
document.getElementById('rowDetails').style.display='';
}
至:
$( document ).ready(function() {
$(".hide_button").click(function(){
$(this).parents('tr').hide();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.