How to get all the data of a row that has been clicked in a table using javascript of jQuery

Question

I would like to get the data of the row which has a button that has been clicked in the table so that I can get one of the values and pass it as a parameter

My Javascript method

I would like to get the data of the row which has a button that has been clicked in the table so that I can get one of the values and pass it as a parameter

My Javascript method and creation of the table

function StudentList(TestID) {

    var CenterID = $('#ddlCenter').val();
    var SectorID = $('#ddlSector').val();
    var SubjectID = $('#ddlSubject').val();
    var TestID = TestID;



    var jsObject =
    {
        CenterID: CenterID,
        SectorID: SectorID,
        SubjectID: SubjectID,
        TestID: TestID
    };


    $.ajax({
        type: "POST",
        url: "../ResetExam/GetStudentList/",
        data: JSON.stringify(jsObject),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
           
            var clb = response;
            $("#tblReset").DataTable().clear();
            $('#tblReset tbody').empty();
            $("#tblReset").DataTable().destroy();
            $(clb).each(function (index) {
     
                var body = "";
                body += "<tr id='studentCell' >";
               /* body += "<td>" + "</td>";*/
                body += "<td id='studentCell' style='display:none'>"+this.Studentid+"</td>";
                body += "<td style='display:none'>" + this.Testid + "</td>";
                body += "<td>" + this.Name + "</td>";
                body += "<td>" + this.Surname + "</td>";
                body += "<td>" + this.ExamNo + "</td>";
                body += "<td>" + this.IDNumber + "</td>";
                body += "<td>" + this.TestName + "</td>";
                body += "<td>" + this.Description + "</td>";
                body += "<td>" + this.TimeRemaining + "</td>";
                body += "<td>" + this.EndDate + "</td>";

                /* body += "<td>" + "</td>";*/
                body += "<td>" + "</td>";
                body += "</tr>";

                $("#tblReset").append(body);

                var tables = document
                    .getElementsByTagName("td");

                // Looping over table
                for (var i = 0; i < tables.length; i++) {
                    // Get the ith table
                    var table = tables[i];
                    console.log(tables[i]);
                    // Set the id dynamically
                    table.setAttribute("id", i + 1);
                }

                console.log(body);
                console.log(response);
                var cellValue = document.getElementById("studentCell").innerHTML;
                console.log(cellValue); // Output: Value 1 
         
            });
            $('#tblReset').DataTable({
                "aaSorting": [],
                dom: 'Bfrtip',
                buttons: [
                    {
                        extend: 'excel',
                        title: 'IEBT Export',
                        exportOptions: {
                            columns: [1, 2, 3, 4, 5, 6, 7]
                        }
                    }
                ],

                columns: [

                    //{
                    //    'data': null,
                    //    "defaultContent": '<button id="btnUpdate" type="button" class="btn btn-block btn-primary glow" style="width:100px">Update</button>'
                    //},
                    { 'data': 'Studentid' },
                    { 'Testid': 'Testid' },
                    { 'data': 'Name' },
                    { 'data': 'Surname' },
                    { 'data': 'ExamNo' },
                    { 'data': 'Studentid' },
                    { 'data': 'TestName' },
                   
                    { 'data': 'Description' },
                    { 'data': 'TimeRemaining' },

                    { 'data': 'EndDate' },

                    {
                        'data': null,
                        "defaultContent": '<button id="btnReset" type="button" class="btn btn-block btn-primary glow" style="width:100px">Reset</button>'
                    }

                ]
               // console.log(columns)
            });
            $('#tblReset tbody').unbind();
            var cellValue = document.getElementById("studentCell").innerHTML;
            console.log(cellValue); // Output: Value 1 
   
            $('#tblReset tbody').on('click', 'td button', function (event) {
                var currentRow = $(this).closest("tr");

                var rowId =
                    event.target.parentNode.parentNode.id;
                //this gives id of tr whose button was clicked
                var rowData =
                    document.getElementById(rowId).querySelectorAll(".row-data");
                console.log(rowData[0]); 
                var data = $('#tblReset').DataTable().row(currentRow).data();
                console.log(data);
                console.log(currentRow);
                if (document.getElementById("txttime").value.trim() == "") {
                    console.log(data);
                    console.log(currentRow);
                    Reset(data['Studentid']);
                }
                else {
                    UpdateTime(data['Studentid']);
                }

            });
         

        },
        
    });

    return false;
}

 

Answer 1

Does this code help you? My idea is that, we already get the current row, we could use the selector to get the content in each of the item. Since the table column is fixed, then we could get the value of the specific column then.

<table id="tblReset">
    <thead>
        <tr>
            <td>Studentid</td>
            <td>Name</td>
            <td>TestName</td>
            <td>Description</td>
            <td>Operation</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>sId_1</td>
            <td>user1</td>
            <td>testName1</td>
            <td>Desc1</td>
            <td><button>getData</button></td>
        </tr>
        <tr>
            <td>sId_2</td>
            <td>user2</td>
            <td>testName2</td>
            <td>Desc2</td>
            <td><button>getData</button></td>
        </tr>
        <tr>
            <td>sId_3</td>
            <td>user3</td>
            <td>testName3</td>
            <td>Desc3</td>
            <td><button>getData</button></td>
        </tr>
    </tbody>
</table>

@section Scripts{
    <script>
        $('#tblReset tbody').on('click', 'td button', function (event) {
            var currentRow = $(this).closest("tr");
            console.info(currentRow);
            var col1 = currentRow.find("td:eq(0)").html();
            var col2 = currentRow.find("td:eq(1)").html();
            var col3 = currentRow.find("td:eq(3)").html();
            console.info(col1 + "|" + col2 + "|" + col3);
        });
    </script>
}