Question

表的结构如下所示。我没有包含类的选择器，也不想动态添加任何类，因此可以选择这些类作为选择器。

<table class="gridView" cellspacing="0" border="0" id="gvwCasesTable" style="border-collapse:collapse;">
    <tbody>
        <tr class="gridHeader">
            <th scope="col">th1</th>
            <th scope="col">th2</th>
            <th scope="col">th3</th>
        </tr>
        <tr>
       <td>...</td>
           <td>..</td>
            <td>
                <span>
                   <input type="checkbox" name="" id="" value="0" checked="true"/>
                </span> 
    </td>
        </tr>
        <tr>
       <td>..</td>
           <td>..</td>
            <td>
                <span>
                   <input type="checkbox" name="" id="" value="0" checked="true"/>
                </span>  
            </td>
        </tr> ..
    </tbody>
</table>

如果有人可以为前面提到的目的使用父母和子女选择器，我将不胜感激。

Answer 1

您可以使用以下选择器：

:last-child来过滤父母最后一个孩子的元素
:checked来过滤已检查的元素

选中复选框后，找到最近的tr并执行任何操作：

$("#gvwCasesTable td:last-child input[type=checkbox]:checked")
    .closest("tr")
    .addClass("disabled");

Demo here

Answer 2

Here you can hide it using jquery

<table class="gridView" cellspacing="0" border="0" id="gvwCasesTable" style="border-collapse:collapse;">
    <tbody>
        <tr class="gridHeader">
            <th scope="col">th1</th>
            <th scope="col">th2</th>
            <th scope="col">th3</th>
        </tr>
        <tr>
            <td id="hide">...</td>
            <td id="hide">>..</td>
            <td id="hide">> <span>
                       <input type="checkbox" name="" id="" value="0" checked="true"/>
                    </span> 
            </td>
        </tr>
        <tr>
            <td id="hide">>..</td>
            <td id="hide">>..</td>
            <td id="hide">> <span>
                       <input type="checkbox" name="" id="" value="0" checked="true"/>
                    </span> 
            </td>
        </tr>
        ..
    </tbody>
</table>


Jquery:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("hide").hide();
  });
  $("#show").click(function(){
    $("p").show();// if you want to show some part use it
  });
});

Answer 3

试试这个：

$('table td:last-child input:checked').each(function() {

    var disCls = 'disabled';

    var $table = $(this).closest('table');

    //this table has been processed
    if ($table.hasClass(disCls))
        return;

    //disable all inputs in this table
    $table.addClass(disCls).find('input').prop('disabled', true);
});

http://jsfiddle.net/rooseve/CWFLy/1/

给定行的最后一个td如何禁用所有td及其子元素有一个复选框被检查？

3 个答案: