using nth-child and has

Question

I need to have the 14th td in a tbody > tr row that contains a input checkbox that is checked to add a class to that parent td. I am sure I am over complicating this thing, can I get some help?

JQUERY Javascript Table

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

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

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

You can slightly reduce that to `$('tbody tr td:nth-child(14) input[type="checkbox"]:checked')` I think — Sterling Archer, May 19 '15 at 19:13

AmmarCSE · Answer 1 · 2015-05-19T20:05:01.403

0

Do

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

DEMO

edited May 19 '15 at 20:05

answered May 19 '15 at 19:13

AmmarCSE

30,079
5
45
53

does not seem to be working, I edited my HTML to match exactly what I have. – Cesar Bielich May 19 '15 at 19:37
@CesarBielich, just updated my fiddle. Make sure you have tbody wrapped in table. Let me know if you need more help – AmmarCSE May 19 '15 at 19:39
Dang still not working, it seems to have to do with my table being generated dynamically – Cesar Bielich May 19 '15 at 20:10

Grundy · Answer 2 · 2015-05-19T20:48:57.537

If i understand right you need something like this:

get checked checkboxes
get parents
add class

$('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: i'm a bit look to bootstrapTable plugin and methinks you bit rushed with the choice.
Anyway in examples page you can find sample with CellStyle

Use cellStyle column option to set the cell style of bootstrap table

and your cellStyle function should be like

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

ok your example works with my JSFIDDLE http://jsfiddle.net/j490azj8/1/ but for some reason is not working on my site. I have to add which I am sorry I didn't that this table is dynamically generated through javascript so I have a feeling that is the issue — Cesar Bielich, May 19 '15 at 19:47
@CesarBielich, so provide what you have, and we can help you — Grundy, May 19 '15 at 19:51
I have added my JS code that generates the table as well. The HTML is exactly what it looks like after it is generated — Cesar Bielich, May 19 '15 at 19:54
@CesarBielich can you provide sample data for table? in json — Grundy, May 19 '15 at 20:19
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/78251/discussion-between-grundy-and-cesar-bielich). — Grundy, May 19 '15 at 20:21

score 0 · Answer 3 · answered May 19 '15 at 21:34

I finally found my answer. The issue is when trying to apply styling and things like that to a dynamically generated table like datatable or bootstrapTable you have to wait till the data is fully loaded first or it will not apply the styling through jquery.

My Code that works

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

bootstrapTable Events Documentation

using nth-child and has

3 Answers3

Linked