All geek questions in one place

Using nth-child and has

I need to have the 14th tdin the tbody> line tr, which contains input checkbox, which is checked to add the class to this parent td. I'm sure I'm complicating this thing too much, can I get 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>
0
source share
3 answers

Do

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

Demo

0
source

If I understand correctly, you need something like this:

  • check the boxes
  • 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>
Run code

UPDATE: I look at the plugin a bit bootstrapTableand, in my opinion, you remember that you chose this option.
In any case, in the examples page you can find a sample withCellStyle

columnStyle

CellStyle

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

I finally found my answer. The problem is when trying to apply a style, etc. For a dynamically generated table, for example, datatableor bootstrapTable, you need to wait until the data is fully loaded or styling through jquery is applied.

My code that works

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

event loading documentation

0
source

Source: https://habr.com/ru/post/1588885/

More articles:


All Articles