Question

我有一个非常大的数据表。作为参考，我打印的HTML只有两个记录：

<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0">
    <tr class="evenRow">
        <th width="33%" style="text-align:center;" class="question-id">Que ID</th>
        <th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
        <th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
    </tr> 
    <tr class="oddRow">
        <td class="question-id" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51550,51545#searchPopContent" title="View question" class="inline_view_question_detail">QUE51550</a>
        </td>
        <td class="question" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51550,51545#searchPopContent" title="View question" class="inline_view_question_detail">QUE51545</a>              
            <a href="#deletePopContent" class="c-icn c-remove delete_question" delhref="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=delete&question_id=51545&subject_id=2&topic_id=464" title="Delete question"> Delete</a>              
        </td>
        <td class="question" align="center" valign="top">
            90.84<br />
        </td>
    </tr>
    <tr class="oddRow">
        <td class="question-id" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51589,51393#searchPopContent" title="View question" class="inline_view_question_detail">QUE51589</a>    
        </td>
        <td class="question" align="center" valign="top">
            <a href="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=get_question_detail&question_ids=51589,51393#searchPopContent" title="View question" class="inline_view_question_detail">QUE51393</a>              
            <a href="#deletePopContent" class="c-icn c-remove delete_question" delhref="http://localhost/eprime/entprm/web/control/modules/questions/match_question.php?op=delete&question_id=51393&subject_id=2&topic_id=464" title="Delete question"> Delete</a>              
        </td>
        <td class="question" align="center" valign="top">
            91.80<br />
        </td>
    </tr>
</table>

现在，如果我想在用户点击该行的“删除”图标时隐藏相应的整行，我应该如何使用jQuery实现这一目标？

Answer 1

使用.closest()查找第一个匹配的父级

$('.delete_question').on('click', function(){
    $(this).closest('tr').hide();
    // any other code, e.g. some ajax here
});

您可能还想阻止默认点击事件（设置为#deletePopContent）

$('.delete_question').on('click', function(e){
    e.preventDefault();
    $(this).closest('tr').hide();
    // any other code, e.g. some ajax here
});

Answer 2

试试这个：

$(".delete_question").click(function(){
  $(this).parents('tr').hide();
})

<强> FIDDLE DEMO

Answer 3

试试这个

$(".delete_question").click(function(){
  $(this).parents('tr:first').hide();
});

这对嵌套表也很有帮助。

Answer 4

这是我一直在为项目工作的事情。

小提琴 - http://jsfiddle.net/jDNy4/

单击删除按钮时，需要内联确认。如果确认删除了tr。

HTML

<table> 
<thead> 
    <tr> 
        <th>Current</th> 
        <th>2013</th> 
        <th>2012</th> 
        <th>2011</th> 
        <th>2010</th> 
        <th>2009</th> 
        <th>Budget</th> 
        <th>Proposed</th> 
        <th></th> 
    </tr> 
</thead> 

<tbody> 
    <tr> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
        <td><input type="text" /></td> 
    </tr> 

</tbody> 

<tfoot> 
    <tr><td><a href="#" class="add">Add Row</a></td></tr> 
</tfoot> 
</table>

Javascript（jQuery 1.10.1）

$(document).ready(function(){ 
$(".add").click(function(){ 
$("tbody").append('<tr><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td><input type="text" /></td><td class="removeSelection"><a href="#" class="remove">Remove</a></td></tr>'); 
}); 

$("tbody").on('click','.remove',function(){ 
    $(this).parent().append( $( '<div class="confirmation"><a href="#" class="removeConfirm">Yes</a><a href="#" class="removeCancel">No</a></div>')) 
    $(this).remove(); 
}); 

$("tbody").on('click','.removeConfirm',function(){ 
    $(this).parent().parent().parent().remove(); 
}); 

$("tbody").on('click','.removeCancel',function(){ 
    $(this).parent().parent().append('<a href="#" class="remove">Remove</a>'); 
    $(this).parent().remove(); 
}); 
}); 

$(document).ready(function() { 
var form = $('#ajax'); // contact form 

// form submit event 
$(".text").blur(function(){ 

$.ajax({ 

  type: 'POST', // form submit method get/post 
  dataType: 'html', // request type html/json/xml 
  data: form.serialize(), // serialize form data  
  success: function(data) { 
    url: 'functions.php'; // form action url 
  }, 
  error: function(e) { 
    console.log(e) 
  } 
}); 
}); 
});

如何在jQuery中隐藏整个表行？

4 个答案: