如何使用jQuery的JavaScript获取表中已单击的行的所有数据

zy1mlcev  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(185)

我想得到的数据行有一个按钮,已在表中点击,这样我就可以得到的值之一,并通过它作为一个参数

我的JavaScript方法

我想得到的数据行有一个按钮,已在表中点击,这样我就可以得到的值之一,并通过它作为一个参数

我的JavaScript方法和表的创建

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;
}
vc9ivgsu

vc9ivgsu1#

这段代码对你有帮助吗?我的想法是,我们已经得到了当前行,我们可以使用选择器来获得每个条目中的内容。由于表的列是固定的,那么我们就可以得到特定列的值。

<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>
}

相关问题