2015-05-19 57 views
0

我需要有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> 
+0

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

回答

0

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

DEMO

+0

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

+0

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

+0

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

0

如果我理解正确的,你需要的是这样的:

  1. 获取选中的复选框
  2. GE牛逼的父母
  3. 添加类

$('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 {}; 
} 
+0

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

+0

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

+0

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

0

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

我的作品

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

bootstrapTable Events Documentation