Question

我正在尝试动态添加包含表单

的表格行

<tr><form><td>Input type</td><td>Submit Form</td></tr></form>

但我未能得到我的JavaScript文件的确切结果如下：

 //adding new row for table in upcoming classes module.
var counter = 0;

$("#addrow").on("click", function () {
    var newRow = $("<tr><form id="scheudleTable1">");
    var cols = "";
    cols += '<td><input type="text" class="form-control" placeholder="Name" name="student_name' + counter + '"></td>';
    cols += '<td><input type="checkbox" class="form-check-input"  name="attendance_info' + counter + '"></td>';
    cols += '<td><input type="checkbox" class="form-check-input" name="feedbackInfo' + counter + '"></td>';
    cols += '<td>';
    cols += '<input type="submit" class="btn btn-sm btn-success"  value="Add"> &nbsp; &nbsp; ';
    cols += '<input type="button" class="ibtnDel btn btn-sm btn-danger"  value="X">';
    cols += '</td>';
    newRow.append(cols);
    $("table.studentList").append(newRow);
    counter++;
});



$("table.studentList").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();       
    counter -= 1
});

我的html文件如下所示：

<tr>
<form id="scheudleTable1"></form>
<td><input type="text" class="form-control" placeholder="Name" name="student_name0"></td><td><input type="checkbox" class="form-check-input" name="attendance_info0"></td>
<td><input type="checkbox" class="form-check-input" name="feedbackInfo0"></td>
<td><input type="submit" class="btn btn-sm btn-success" value="Add"> &nbsp; &nbsp; 
    <input type="button" class="ibtnDel btn btn-sm btn-danger" value="X"></td></tr>

请帮助获得如下结果：

<tr>
<form id="myTable">
<td><input type="text" class="form-control" placeholder="Name" name="student_name0"></td><td><input type="checkbox" class="form-check-input" name="attendance_info0"></td>
<td><input type="checkbox" class="form-check-input" name="feedbackInfo0"></td>
<td><input type="submit" class="btn btn-sm btn-success" value="Add"> &nbsp; &nbsp; 
    <input type="button" class="ibtnDel btn btn-sm btn-danger" value="X"></td></form></tr>

Answer 1

创建一个表<table id="tableData">之后，将所有<td>写入单行，如下所示

var cols= '<td><input type="text" class="form-control" placeholder="Name" name="student_name' + counter + '"></td><td><input type="checkbox" class="form-check-input" name="attendance_info' + counter + '"></td>';

之后使用

将其附加到表ID

$('#tableData').append(cols);

希望它有所帮助!!

Answer 2

你可以试试这个：

https://jsfiddle.net/shashikantk1992/Lysu9nob/4/

     //adding new row for table in upcoming classes module.
var counter = 0;
var scheudleTable1='mytable';
$("#addrow").on("click", function () {
//alert('asd');

    var newRow = $("<form id='"+scheudleTable1+"'><tr>");
    var cols = "";
    cols += '<td><input type="text" class="form-control" placeholder="Name" name="student_name' + counter + '"/></td>';
    cols += '<td><input type="checkbox" class="form-check-input"  name="attendance_info' + counter + '"/></td>';
    cols += '<td><input type="checkbox" class="form-check-input" name="feedbackInfo' + counter + '"/></td>';
    cols += '<td>';
    cols += '<input type="submit" class="btn btn-sm btn-success"  value="Add"> &nbsp; &nbsp; ';
    cols += '<input type="button" class="ibtnDel btn btn-sm btn-danger"  value="X"/>';
    cols += '</td>';
   newRow.append(cols);
    $("table.studentList").append(newRow);
    counter++;

});



$("table.studentList").on("click", ".ibtnDel", function (event) {
    $(this).closest("form").remove();       
    counter -= 1
});

想要在Jquery中动态添加表行包含表单标记

2 个答案: