使用 jquery 或 javascript 动态添加行，其中包含来自客户端模型的内容

Question

我从我的 cshtml 文件中截取了以下代码

<div id="trows" class="table-responsive">
        <table class="table table-bordered" id="myTable">
</div>

并在 on add 按钮事件中添加一行我尝试如下：-

        var itemRSelected = $("#SelectedteRId option:selected").text();
        var itemNSelected = $("#SelectedName option:selected").text();

        debugger;
        //all ok till above. I verified in debuggger
        //but I am not able to add these values along with the Model rows to the table using below code. Any help? clue to fix the issue?
        @{var i = 0;}
        @foreach (MyNameSpace.Models.MyClassObj p in Model.myClassList)
        {
           if(itemRSelected == p.RowId && itemNSelected == p.NamePix) {
                          var row = "<tr><td>" + @(p.RowId) + "</td><td>" + @(p.NamePix) +
                "</td><td>" + @(p.Mi) + "</td><td>" + @(p.Name) +
                "</td><td>" + @(p.ExtraDate) +
                "</td><td><a class='btn btn-danger btn-xs btnDelete' title='Delete'><i class='fa fa-trash-o'></i></a></td><tr>" ; }

                @: <text>@row</text>
                @:$("#myTable").eq(@i++).after(@row);

           }

Answer 1

要使用这些功能，您需要创建一个 HTML 表格并为其指定一个唯一 ID。示例代码使用 tblGrid 作为 ID，但您可以使用任何其他名称 - 只需确保修改函数以使用新名称。接下来，您需要修改 addRow 函数以确保添加正确数量的单元格并正确设置它们的 innerHTML。

 //add a new row to the table
function addRow()
{
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("tblGrid").insertRow();

    //add 3 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t1'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t2'>";

    oCell = newRow.insertCell();
    oCell.innerHTML = "<input type='text' name='t3'>&nbsp;&nbsp;<input" + 
                      " type='button' value='Delete' onclick='removeRow(this);'/>";   
}

//deletes the specified row from the table
function removeRow(src)
{
    /* src refers to the input button that was clicked. 
       to get a reference to the containing <tr> element,
       get the parent of the parent (in this case <tr>)
    */   
    var oRow = src.parentElement.parentElement;  

    //once the row reference is obtained, delete it passing in its rowIndex   
    document.all("tblGrid").deleteRow(oRow.rowIndex);  

}

可以参考这个链接Dynamically add and remove rows in an HTML table