使用nth-child并且有

时间：2015-05-19 19:07:23

标签： jquery

我需要在td＆gt;中获得第14个tbody包含tr input的{​​{1}}行，系统会检查该类以向该父checkbox添加类。我相信我已经使这件事变得复杂，我可以得到一些帮助吗？

JQUERY Javascript表 

td

JQUERY 

var $table = $('#table-javascript').bootstrapTable({
    method: 'get',
    url: 'bootstrap_database.php',
    height: 3849,
    cache: false,
    striped: true,
    pagination: true,
    search: true,
    pageSize: 100,
    pageList: [100, 200, 600, 1000],
    minimumCountColumns: 2,
    clickToSelect: true,
    columns: [{
        field: 'ID',
        title: 'ID',
        align: 'center',
        visible: false
    },{
        field: 'backlink',
        title: 'Backlink',
        align: 'left',
        width: '20'
    },{
        field: 'indexed',
        title: 'PI',
        align: 'center',
        width: '20',
    },{
        field: 'dindexed',
        title: 'DI',
        align: 'center',
        width: '20',
    },{
        field: 'moz',
        title: 'MOZ',
        align: 'center',
        width: '20',
    },{
        field: 'email',
        title: 'EM',
        align: 'center',
        width: '20'
    },{
        field: 'social',
        title: 'SOC+',
        align: 'center',
        width: '20'
    },{
        field: 'whois',
        title: 'WHO',
        align: 'center',
        width: '20'
    },{
        field: 'notes',
        title: 'NT',
        align: 'center',
        width: '20'
    },{
        field: 'removed',
        title: 'RM',
        align: 'center',
        width: '20'
    },{
        field: 'import_label',
        title: 'SR',
        align: 'center',
        width: '20'
    },{
        field: 'important',
        title: 'IM',
        align: 'center',
        width: '20'
    },{
        field: 'refresh',
        title: 'RF',
        align: 'center',
        width: '20',
        class: 'refreshstats'
    },{
        field: 'exempt',
        title: 'EX',
        align: 'center',
        width: '20',
    },{
        field: 'spammy',
        title: 'SP',
        align: 'center',
        width: '20',
    }]
});

HTML之前 

if ($('tbody tr td:nth-child(14)').has('input:checkbox:checked')) {
    $(this).parent('td').addClass('spammy_color');
}

HTML后 

<tbody class="searchable">
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" checked="checked" /></td>
</tr>
</tbody>

3 个答案:

答案 0 :(得分：0)

待办事项

if ($('.searchable td:nth-child(14):has(:checked)')) {
    $(this).parent('td').addClass('spammy_color');
}

DEMO

答案 1 :(得分：0)

如果我理解正确你需要这样的东西：

  1. 选中复选框
  2. 得到父母
  3. 添加课程

    4. ＆＃13;
    ＆＃13; 
    $('tr td:nth-child(14) :checked').parent().addClass('spm');
    ＆＃13; 
    .spm {
  background-color: green;
}
    ＆＃13; 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody class="searchable">
    <tr>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" checked="checked" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" checked="checked" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" />
      </td>
      <td>
        <input type="checkbox" checked="checked" />
      </td>
    </tr>
  </tbody>
</table>
    ＆＃13;
    ＆＃13;
    ＆＃13;

    更新：我对bootstrapTable插件有点了解，并认为你有点急于选择。
    无论如何，examples page您可以找到CellStyle

    的示例
      

    使用cellStyle列选项设置引导表的单元格样式

    ，您的cellStyle功能应该像

    function cellstyle(value, row, index){
    if(value){
        return {
            classes: "spammy_color"
        };
    }
    return {};
}

答案 2 :(得分：0)

我终于找到了答案。问题是当尝试将样式和类似的东西应用于动态生成的表（如datatable或bootstrapTable时，您必须等到数据首先完全加载，否则它将不会通过jquery应用样式。

我的代码有效

$table.on('load-success.bs.table', function () {
    $('tr td:nth-child(14) :checked').parent().addClass('spammy_color');
});

bootstrapTable Events Documentation

相关问题
最新问题