Question

我在表格中有3行，标题行，视图行和编辑行。我试图隐藏＆＃34; viewrow＆＃34;并显示＆＃34; editrow＆＃34;来自viewrow中的链接。视图切换，但编辑不会。

<table width=400 cellpadding=3 cellspacing=2 border=0 align=center>
<tr class="headerrow">
    <td><strong>Field One</strong></td>
    <td><strong>Field Two</strong></td>
    <td>&nbsp;</td>
</tr>
<tr class="viewrow">
    <td>Item One-One</td>
    <td>Item One-Two</td>
    <td><a href="#" class="edit">Edit</a></td>
</tr>
<form>
<tr class="editrow">
    <td><input type="hidden" name="id" value="1" /><input type="text" name="fieldone" value="Item Two-Two" style="width: 300px;" /></td>
    <td><input type="text" name="fieldtwo" value="Item One-Two" /></td>
    <td><input type="submit" value="update" name="submit" /></td>
</tr>
</form>

这是jquery：

jQuery(function($) {
$('.edit').click(
function() {
    //hide the view row, and show the edit row
    $(this).closest('tr').toggle();
    $(this).closest('tr').next('.editrow').toggle();
});
});

CSS：

.editrow {
display: none;
}

对我可能做错了什么的想法？

Answer 1

jQuery(function($) {
$('.edit').click(
function() {
    //hide the view row, and show the edit row
    $('.viewrow').hide();
     $('.editrow').show();
});
});

试试上面的

Answer 2

jQuery(function($) {
 $('.edit').click(
  function() {
   //hide the view row, and show the edit row
   $(this).closest('tr').toggle().end()
          .parents('table').find('.editrow').toggle(); 
  });
});

这也可行：）

您的代码无效，因为您使用.next（）来查找.editrow。

.next（）用于查找兄弟元素但在您的情况下，.editrow不是.viewrow的兄弟元素，因为它嵌套在'form'元素中。

切换表格中的下一行

2 个答案: