javascript - 无法使用索引号在两行中间添加行

Question

我现在已经动态创建了一个表格，我想在已经存在的两行之间添加行，我正在尝试下面的代码，但它不起作用

 var newRow = '<tr id="' + RowCountDoctorVisit + '">' +
                                '<td ><a href="javascript:void(0);" onclick="removeRowDoctor(' + RowCountDoctorVisit + ');"><i class="fa fa-trash"></i></a>&nbsp;' +
                                   '<a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"><i class="fa fa-edit"></i></a>' +
                                '</td>' +
                                '<td class="column" data-label="DoctorName">' + DoctorName +
                               '</td><td style="display:none;" data-label="DoctorID">' + DoctorID +
                               '<td class="column" data-label="Visit Type">' + VisitType +
                               '</td><td style="display:none;" data-label="Visit Type ID">' + VisitTypeID +
                                '<td class="column" data-label="Room Group Name">' + RoomGroupName +
                               '</td><td style="display:none;" data-label="Room Group ID">' + RoomGroupID +
                               '</td><td class="column" data-label="Rate">' + Rate +
                               '</td><td class="column" data-label="Unit">' + Unit +
                               '</td><td class="column" data-label="Amount">' + Amount +
                               '</tr>'

document.getElementById("DoctorIndex").value contains index number
    $('table#DoctorVisit > tbody > tr:eq(' + document.getElementById("DoctorIndex").value + ')').after(newRow);

Answer 1

我尝试了类似的方法并且它有效，但是如果我想使用 newRow 变量来添加整行

var tbl = document.getElementById("DoctorVisit");
            var indexno = document.getElementById("DoctorIndex").value;
            var row = tbl.insertRow(indexno);
            row.id = RowCountDoctorVisit;
        var cell1 = row.insertCell(0);
        cell1.className = 'column';
        var cell2 = row.insertCell(1);
        cell2.className = 'column';
        var cell3 = row.insertCell(2);
        cell3.className = 'dynamicallyHiddenRow';
        var cell4 = row.insertCell(3);
        cell4.className = 'column';
        var cell5 = row.insertCell(4);
        cell5.className = 'dynamicallyHiddenRow';
        var cell6 = row.insertCell(5);
        cell6.className = 'column';
        var cell7 = row.insertCell(6);
        cell7.className = 'dynamicallyHiddenRow';
        var cell8 = row.insertCell(7);
        cell8.className = 'column';
        var cell9 = row.insertCell(8);
        cell9.className = 'column';
        var cell10 = row.insertCell(9);
        cell10.className = 'column';
        cell1.innerHTML = '<a href="javascript:void(0);" onclick="removeRowDoctor(' + RowCountDoctorVisit + ');"><i class="fa fa-trash"></i></a>&nbsp;<a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"><i class="fa fa-edit"></i></a>';
        cell2.innerHTML = DoctorName;
        cell3.innerHTML = DoctorID;
        cell4.innerHTML = VisitType;
        cell5.innerHTML = VisitTypeID;
        cell6.innerHTML = RoomGroupName;
        cell7.innerHTML = RoomGroupID;
        cell8.innerHTML = Rate;
        cell9.innerHTML = Unit;
        cell10.innerHTML = Amount;