Какой стиль мне нужен, чтобы сделать строку кликабельной и выделенной в таблице HTML? - PullRequest
Новая
       31

Какой стиль мне нужен, чтобы сделать строку кликабельной и выделенной в таблице HTML?

0 голосов
/ 26 апреля 2020

Я создал таблицу, и она выглядит так, как я хотел, я также реализовал функцию ajax для получения идентификатора выбранной строки при щелчке по ним, однако я не смог выделить строку с помощью цвет при нажатии на него, а также отмечен флажок при щелчке в строке. Я нашел идеальное решение, но я не знал, как загрузить стиль, поскольку он не объясняет, как, и я новичок в этом: таблица со щелкающими строками

Так что в в моем случае, как я могу загрузить эти стилизирующие ресурсы в мой код html? Мне нужно знать, как каждый из них вписывается в теги или теги, так как я полностью потерян, и этот пример не объясняет, как они загружаются.

ОБНОВЛЕНИЕ: вот что у меня сейчас: 

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+dfgdfgdfgfdgd/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">

<script>
    $(document).ready(function() {
        var table = $('#example').DataTable({
            'columnDefs': [{
                'targets': 0,
                'checkboxes': {
                    'selectRow': true
                }
            }],
            'select': {
                'style': 'multi'
            },
            'order': [
                [1, 'asc']
            ]
        });
        $('#example-select-all').on('click', function() {
            var rows = table.rows({
                'search': 'applied'
            }).nodes();
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });
        $('#example tbody').on('change', 'input[type="checkbox"]', function() {
            if (!this.checked) {
                var el = $('#example-select-all').get(0);
                if (el && el.checked && ('indeterminate' in el)) {
                    el.indeterminate = true;
                }
            }
        });

        $('#frm-example').on('submit', function(e) {
            var form = this;
            table.$('input[type="checkbox"]').each(function() {
                if (!$.contains(document, this)) {
                    if (this.checked) {
                        $(form).append(
                            $('<input>')
                            .attr('type', 'hidden')
                            .attr('name', this.name)
                            .val(this.value)
                        );
                    }
                }
            });
        });
         $('#example tbody').on('click', 'tr', function() {
             var data = table.row(this).data();
         });
    });
</script>
...