Question

HTML表格：

/* one table */
    <table class="table borderless" id="cegadatok">
        <tr class="info">
            <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
            <td width="25%">Company name</td>
            <td width="20%">Email address</td>
            <td width="35%">Address </td>
            <td width="15%">Tax numver</td>
        </tr>
    </table>
    <table class="table borderless" id="tetelek" style="width: 90%;" align="right">
        <tr>
            <td width="5%"><input type="checkbox" value="1"></td>
            <td class="warning">1</td>
            <td class="warning">2</td>
            <td class="warning">3</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="2"></td>
            <td class="warning">4</td>
            <td class="warning">5</td>
            <td class="warning">6</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="3"></td>
            <td class="warning">7</td>
            <td class="warning">8</td>
            <td class="warning">9</td>
        </tr>

    </table>

    /* Two table */
    <table class="table borderless" id="cegadatok">
        <tr class="info">
            <td width="5%"><input type="checkbox" class="checkAll" value="90"></td>
            <td width="25%">Company name</td>
            <td width="20%">Email address</td>
            <td width="35%">Address </td>
            <td width="15%">Tax numver</td>
        </tr>
    </table>
    <table class="table borderless" id="tetelek" style="width: 90%;" align="right">
        <tr>
            <td width="5%"><input type="checkbox" value="1"></td>
            <td class="warning">1</td>
            <td class="warning">2</td>
            <td class="warning">3</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="2"></td>
            <td class="warning">4</td>
            <td class="warning">5</td>
            <td class="warning">6</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="3"></td>
            <td class="warning">7</td>
            <td class="warning">8</td>
            <td class="warning">9</td>
        </tr>

    </table>
    /* Etc tables ... */

jQuery代码：

    $( document ).ready(function() {

        $(".checkAll").click(function(e){
            $(this).closest('tr').attr('class', 'success');
            if(!this.checked){
                $(this).closest('tr').attr('class', 'info');
            }
            $('#tetelek').find('td input:checkbox').prop('checked', this.checked);
            $('#tetelek').find('td').prop('class', 'success');
        });


    });

我想创建一个样本发票生成器系统。如果我点击复选框ID＆＃39; checkAll＆＃39;，则jquery会选择＆＃39; id =＆＃34; tetelek＆＃34;中的复选框表。在点击之后，我想设置td class：active（来自bootstrap）。所以，例如。

谢谢！

Answer 1

你唯一缺少的是最后一行应该是：

 $('#tetelek').find('td').toggleClass('active',this.checked);

$(".checkAll").click(function(e){
  $(this).closest('tr').attr('class', 'success');
  if(!this.checked){
    $(this).closest('tr').attr('class', 'info');
  }
  $('#tetelek').find('td input:checkbox').prop('checked', this.checked);
  $('#tetelek').find('td').toggleClass('active',this.checked);
});

td.active{
  background:green
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table borderless" id="cegadatok">
        <tr class="info">
            <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
            <td width="25%">Company name</td>
            <td width="20%">Email address</td>
            <td width="35%">Address </td>
            <td width="15%">Tax numver</td>
        </tr>
    </table>
    <table class="table borderless" id="tetelek" style="width: 90%;" align="right">
        <tr>
            <td width="5%"><input type="checkbox" value="1"></td>
            <td class="warning">1</td>
            <td class="warning">2</td>
            <td class="warning">3</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="2"></td>
            <td class="warning">4</td>
            <td class="warning">5</td>
            <td class="warning">6</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="3"></td>
            <td class="warning">7</td>
            <td class="warning">8</td>
            <td class="warning">9</td>
        </tr>

    </table>

Answer 2

<table class="table table-hover" >
    <tr class="active">
        <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
        <td width="25%">Company name 1</td>
        <td width="20%">Email address 1</td>
        <td width="35%">Address 1</td>
        <td width="15%">Tax numver 1</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="1"></td>
        <td class="active">1</td>
        <td class="active">2</td>
        <td class="active">3</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="2"></td>
        <td class="active">4</td>
        <td class="active">5</td>
        <td class="active">6</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="3"></td>
        <td class="active">7</td>
        <td class="active">8</td>
        <td class="active">9</td>
    </tr>
    <tr class="active">
        <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
        <td width="25%">Company name 2</td>
        <td width="20%">Email address 2</td>
        <td width="35%">Address 2</td>
        <td width="15%">Tax numver 2</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="1"></td>
        <td class="active">1</td>
        <td class="active">2</td>
        <td class="active">3</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="2"></td>
        <td class="active">4</td>
        <td class="active">5</td>
        <td class="active">6</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="3"></td>
        <td class="active">7</td>
        <td class="active">8</td>
        <td class="active">9</td>
    </tr>
</table>

期间，我需要修改表格结构。第一个版本至关重要。当我点击公司tr时，它在复选框下会ckeck。谢谢。

表中的jQuery嵌套复选框

2 个答案: