Return table row ID within Function JS

Asked

Viewed 112 times

1

i have the following script below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>A Pen by Jason</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.40.0/css/patternfly.min.css'>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.40.0/css/patternfly-additions.min.css'>
</head>
<body>
    <!-- Table HTML -->
    <table class="table table-striped table-bordered table-hover" id="table1">
        <thead>
            <tr>
                <th>
                    <label class="sr-only" for="selectAll">Select all rows</label>
                    <input type="checkbox" id="selectAll" name="selectAll">
                </th>
                <th>Rendering Engine</th>
                <th>Browser</th>
                <th>Platform(s)</th>
                <th>Engine Version</th>
                <th>CSS Grade</th>
                <th colspan="2">Actions</th>
            </tr>
        </thead>
    </table>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
    <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.40.0/js/patternfly.dataTables.pfFilter.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.40.0/js/patternfly.dataTables.pfPagination.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.40.0/js/patternfly.dataTables.pfResize.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.40.0/js/patternfly.min.js'></script>
    <script>
        // Initialize Datatables
        $(document).ready(function() {
            $(".datatable").dataTable();
        });

        $(document).ready(function() {
            // JSON data for Table View
            var dataSet = [{
                engine: "Trident",
                browser: "Internet Explorer 4.0",
                platforms: "Win 95+",
                version: "4",
                grade: "X"
            }, {
                engine: "Trident",
                browser: "Internet Explorer 5.0",
                platforms: "Win 95+",
                version: "5",
                grade: "C"
            }];

            // DataTable Config
            $("#table1").DataTable({
                columns: [{
                    data: null,
                    className: "table-view-pf-select",
                    render: function(data, type, full, meta) {
                        // Select row checkbox renderer
                        var id = "select" + meta.row;
                        return (
                            '<label class="sr-only" for="' +
                            id +
                            '">Select row ' +
                            meta.row +
                            '</label><input type="checkbox" id="' +
                            id +
                            '" name="' +
                            id +
                            '">'
                        );
                    },
                    sortable: false
                }, {
                    data: "engine"
                }, {
                    data: "browser"
                }, {
                    data: "platforms"
                }, {
                    data: "version"
                }, {
                    data: "grade"
                }, {
                    data: null,
                    className: "table-view-pf-actions",
                    render: function(data, type, full, meta) {
                        // Inline action button renderer
                        return '<div class="table-view-pf-btn"><button class="btn btn-default" type="button">Actions</button></div>';
                    }
                }, {
                    data: null,
                    className: "table-view-pf-actions",
                    render: function(data, type, full, meta) {
                        // Inline action kebab renderer
                        return (
							'<div class="dropdown dropdown-kebab-pf">' +
							'<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">' +
							'<span class="fa fa-ellipsis-v"></span></button>' +
							'<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownKebabRight">' +
							'<li class ="send-delete" id="send-delete"><a href="#">Delete Row</a></li>' +
							'<li role="separator" class="divider"></li>' +
							'<li><a href="#">Update Row</a></li></ul></div>'
                        );
                    }
                }],
                data: dataSet,
                dom: "t",
                language: {
                    zeroRecords: "No records found"
                },
                order: [
                    [1, "asc"]
                ]
            });
        });
// #################################### deleta linha
		$(function(){
			$(".send-delete").click(function(event){
				event.preventDefault();
				var idrow = meta.row
			}); 
		});
    </script>
</body>
</html>

I need that when the user clicks the delete Row button, my function:

        $(function(){
        $(".send-delete").click(function(event){
            event.preventDefault();
            var idrow = meta.row;
        }); 
    });

Which is linked to the HTML button event:

<li class ="send-delete" id="send-delete"><a href="#">Delete Row</a></li>

Get the meta.Row value that’s inside my data table:

            $("#table1").DataTable({
            columns: [{
                data: null,
                className: "table-view-pf-select",
                render: function(data, type, full, meta) {
                    // Select row checkbox renderer
                    var id = "select" + meta.row;
                    return (
                        '<label class="sr-only" for="' +
                        id +
                        '">Select row ' +
                        meta.row +
                        '</label><input type="checkbox" id="' +
                        id +
                        '" name="' +
                        id +
                        '">'
                    );
                },

But whenever I try to return this value it gives error, which is the best way to access this value with my Function?

1 answer

1


Solution:

JS

        function reply_click(clicked_id)
    {
        alert(clicked_id);
    }

HTML

<li id="'+meta.row+'" onClick="reply_click(this.id)"><a href="#">Delete Row</a></li>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.