DataTables - jquery - добавить 2 дочерние строки в таблицу за 2 клика - PullRequest
Новая
       18

DataTables - jquery - добавить 2 дочерние строки в таблицу за 2 клика

0 голосов
/ 16 апреля 2019

У меня есть стол. В последнем столбце у меня есть изображение. При нажатии открывается дочерняя строка и отображается содержимое скрытой ячейки.

Этот скрипт отлично работает. 

<script>
jQuery(document).ready(function ($) {
    var table = $('#DataTables_Table_0').DataTable();
    table.columns([10,11]).visible(false); // Hide the Transcript and Notes column

    // Contents of the Transcript cell
    table.rows().every( function () {
        var cell = table.cell(this.index(),9).data();
        this.child(`TRANSCRIPT<br>`+cell);
        });

    // added the OFF because when clicking through pages of entries, the image stopped being clickable
    $('#DataTables_Table_0 tbody').off('click').on('click', 'td:last-child', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if (row.child.isShown()) {
            // This row is already open - close it.
            row.child.hide();
            tr.removeClass('shown');

        } else {
            // Open row.
            var child = table.row( this ).child;
            row.child.show();
            tr.addClass('shown');
            }
        });
    });
</script>

CSS 

#DataTables_Table_0 td:last-child {
    background: url('http://example.com/wp-content/uploads/2018/06/buttonUP1.png') no-repeat center center;
    cursor: pointer;
    }
#DataTables_Table_0 tr.shown td:last-child {
    background: url('http://example.com/wp-content/uploads/2018/06/buttonDOWN1.png') no-repeat center center;
    }
#DataTables_Table_0 td:nth-child(14) {
    background: url('http://example.com/wp-content/uploads/2018/06/buttonUP2.png') no-repeat center center;
    cursor: pointer;
    }
#DataTables_Table_0 tr.shown1 td:nth-child(14) {
    background: url('http://example.com/wp-content/uploads/2018/06/buttonDOWN2.png') no-repeat center center;
    }

Затем я попытался добавить второе изображение, которое при щелчке открывало бы его собственную дочернюю строку и отображало содержимое другой ячейки. Все, что я пробовал, приводило к тому, что оба изображения при нажатии делали одно и то же. Добавьте ту же дочернюю строку (или удалите ее) с таким же отображаемым содержимым ячейки. 

$('#DataTables_Table_0 tbody').on('click', 'td:nth-child(11)', function () {

Я пытался сделать эти переменные уникальными: tr2, row2, table2, cell2, child2

...