JSFiddle - React, Tailwind, and code Playground

by niJrM

HTML

<textarea  type="text" name="text_area" id="text_area"></textarea>
        <table id="student-info-table">
            <thead>
                <td>No</td>
                <td>Name</td>
                <td>Status</td>
            </thead>
        </table>
        <div>
            <button id="add-student-btn">Add</button>
        </div>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script src="./index.js"></script>

JavaScript

const table = $('#student-info-table').DataTable({
    columns: [
        {data: 'no'},
        {data: 'name'},
        {data: 'status'}
    ]
});


$("#add-student-btn").click(function() {
    let infoTextArea = document.getElementById("text_area").value.trim();
    let studentInfoList = new Array();
    infoTextArea = infoTextArea.split("\n");
    let studenNum = infoTextArea.length;
    //debugger;
	//$('#student-info-table tbody').empty();
  	table.rows().remove().draw();
    let i;
    for ( i = 0; i < studenNum; i++) {
        let name = infoTextArea[i];

        let studentInfo = {
            "no": i,
            "name": name,
            "status": "pending"
        };

        table.row.add(studentInfo).draw();
        studentInfoList.push(studentInfo);
    }
   
    for ( i = 0; i < studenNum; i++) {
        // tại đây em muốn check từng tên rồi update kết quả status
        let checkNameStudent = checkStudent(studentInfoList[i]);
        if (checkNameStudent.status === "OK-passed"){
          setTimeout(function () {
            $('#student-info-table tbody tr:nth-child(' + (checkNameStudent.no + 1) + ')').children('td:nth-child(3)').text('OK-passed');
            }, 1000);
        }        
    }

});


function checkStudent(data) {
    let studentName = data["name"];
    //Khởi tạo biến bên ngoài if...else
    let rowData = null;
    if (studentName == "Tommy") {
        rowData = {
            "no": data["no"],
            "name": data["name"],
            "status": "OK-passed"
        };
    } else {
        rowData = {
            "no": data["no"],
            "name": data["name"],
            "status": "NG-failed"
        };
    }
    return rowData;
}