使用第n个孩子，有

问题描述：

我需要有14 td中包含被选中的类添加到父td一个inputcheckbox一个tbody>tr一行。我相信我已经完成了这件事情，我可以得到一些帮助吗？使用第n个孩子，有

JQUERY的Javascript表

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', 
    }] 
});

JQUERY

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>

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 class="spammy_color"><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 class="spammy_color"><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 class="spammy_color"><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 class="spammy_color"><input type="checkbox" checked="checked" /></td> 
</tr> 
</tbody>

可以稍微减少到'$（代码 'TBODY TR TD：第n个孩子（14）输入[类型= “复选框”]：勾选' ）'我认为 –

答

做

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

DEMO

似乎没有工作，我编辑了我的HTML以匹配我所拥有的。 –

@CesarBielich，只是更新了我的小提琴。确保你有包裹在桌子里的东西。让我知道如果你需要更多的帮助 – AmmarCSE

当仍然不工作，它似乎与我的表动态生成 –

答

如果我理解正确的，你需要的是这样的：

获取选中的复选框
GE牛逼的父母
添加类

$('tr td:nth-child(14) :checked').parent().addClass('spm');

.spm { 
 
    background-color: green; 
 
}

<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>

UPDATE：我有点看向bootstrapTable插件，记错你位，且选择冲去。
反正在examples page你可以用CellStyle

使用cellStyle列选项来设置自举表的单元格样式发现样品

和你cellStyle功能应该像

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

确定您的示例适用于我的JSFIDDLE http://jsfiddle.net/j490azj8/1/但由于某种原因没有在我的网站上工作。我不得不补充说，我很抱歉，我没有认为这个表是通过JavaScript动态生成的，所以我有一个感觉是问题 –

@CesarBielich，所以提供你有什么，我们可以帮助你 – Grundy

我已经添加了我的JS也生成表的代码。该HTML正是它生成后的样子 –

答

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

我的作品

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

bootstrapTable Events Documentation

使用第n个孩子，有

相关推荐