Question

我的表有一行数据与模型绑定，然后我点击一个添加按钮，我试图克隆第一行以及模型。但我无法读取所有克隆的控件，也请让我知道如何将模型映射到动态控件，注意： - 被绑定的模型是List

<table id="Table11" align="center" style="width:95%" class="TFtable">
 <tbody id="pettyTbody">
   <tr>
     @if (Model != null)
     {
        for (int i = 1; i < Model.pettyCashApprovalData.Count; i++)
        {
            <td></td>
            <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[i].AccountCode, new SelectList(new[] { "--Select AccNo--", "ACN001", "ACN002", "ACN003", "ACN004", "ACN005", "ACN006" }), new { @class = "drAccNo chosen-select" })</td>
            <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[i].Desciption, new SelectList(new[] { "--Select Decscription--", "Stationary Expense" }), new { @class = "drDescription chosen-select" })</td>
            <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[i].Expenses, new SelectList(new[] { "Select Some Options", "EMP01", "EMP02", "EMP03", "EMP04", "EMP05", "EMP06" }), new { @class = "drExpences chosen-select", @id = "drExpences", @multiple = "multiple", @style = "width:150px" })</td>
            <td>@Html.TextAreaFor(m => m.pettyCashApprovalData[i].DOE, new { @style = "width:140px;", @class = "txtDOE txtbox " })</td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].ExpDate, String.Empty, new { @style = "width:90px;", @class = "txtExpDate txtbox " }) </td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].Amount, string.Empty, new { @style = "width:80px;", @class = "txtbox txtAmount" })</td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].sGVNO, string.Empty, new { @style = "width:100px;", @class = "txtbox txtwidth" })</td>
            <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[i].Remark, String.Empty, new { @style = "width:150px;", @class = "txtbox" })</td>
            <td></td>
        }
    }
        else
        {
                <td></td>
                <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[0].AccountCode, new SelectList(new[] { "--Select AccNo--", "ACN001", "ACN002", "ACN003", "ACN004", "ACN005", "ACN006" }), new { @class = "drAccNo chosen-select", @id = "AccountCode" })</td>
                <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[0].Desciption, new SelectList(new[] { "--Select Decscription--", "Stationary Expense" }), new { @class = "drDescription chosen-select", @id = "Expenses" })</td>
                <td>@Html.DropDownListFor(m => m.pettyCashApprovalData[0].Expenses, new SelectList(new[] { "Select Some Options", "EMP01", "EMP02", "EMP03", "EMP04", "EMP05", "EMP06" }), new { @class = "drExpences chosen-select", @id = "drExpences", @multiple = "multiple", @style = "width:150px" })</td>
                <td>@Html.TextAreaFor(m => m.pettyCashApprovalData[0].DOE, new { @style = "width:140px;", @class = "txtDOE txtbox " , @id = "DOE" })</td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].ExpDate, String.Empty, new { @style = "width:90px;", @class = "txtExpDate txtbox ", @id = "expDate" }) </td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].Amount, string.Empty, new { @style = "width:80px;", @class = "txtbox txtAmount" , @id = "Amount" })</td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].sGVNO, string.Empty, new { @style = "width:100px;", @class = "txtbox txtwidth", @id = "sGvno" })</td>
                <td>@Html.TextBoxFor(m => m.pettyCashApprovalData[0].Remark, String.Empty, new { @style = "width:150px;", @class = "txtbox", @id = "Remark" })</td>
                <td></td>
        }
    </tr>
</tbody>

通过克隆动态添加行的功能

$("#anc_add").click(function () {

        var count = $('#pettyTbody>tr').length;
        alert(count);
        $("#pettyTbody tr:first").clone().find("td").each(function () {

            $(this).attr({

                'id': function(_, id) { return id + count}
                //name': function(_, name) { return name + count},
                //'value': ''               
            });
        }).end().appendTo("#pettyTbody");
        i++;
    });

Answer 1

您可以通过dinamically方式添加行：

＆＃13;

$(document).ready(function(){
  var i=1;
  $("#add_row").click(function(){
    $('#addr'+i).html($('#addr0').html());

    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
    i++;
  });
  $("#delete_row").click(function(){
    if(i>1){
      $("#addr"+(i-1)).html('');
      i--;
    }
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<table class="table table-bordered table-hover" id="tab_logic">
  <thead>
    <tr>
      <th class="text-center">
        Comment
      </th>
      <th class="text-center">
        Price
      </th>
      <th class="text-center">
        Type
      </th>
    </tr>
  </thead>
  <tbody>
    <tr id='addr0'>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
      <td>
        <br>
        <div class="smart-widget sm-right ">
          <label for="cop" class="field prepend-icon required-field">
            Price
            <input type="text" name="cop" id="cop" class="gui-input">
          </label>
        </div>
      </td>
      <td>
        <div class="smart-widget sm-right ">
          <label for="client" class="field prepend-icon required-field">
            <label for="client" class="control-label"> Type</label>
            <select id="client" name="client" class="chosen-select" data-placeholder="Select..."></select>
          </label>
        </div>
      </td>
    </tr>
    <tr id='addr1'></tr>

  </tbody>
</table>
<a id="add_row" class="btn btn-default pull-left">Add Row</a>
<a id='delete_row' class="pull-right btn btn-default">Delete Row</a>

＆＃13;

希望它有所帮助！

Answer 2

我能够创建没有唯一ID的动态控件，我正在使用表TD和TD值读取动态控件ID值。谢谢大家的答案，它帮助我找到了解决方案。

动态创建HTML控件

2 个答案: