Question

我的查看

中有以下代码

<tr id="tblNewContentRow">
       <td>
     @Html.TextBox("txtNewAttributes", "", new { @class = "alphaonly", style = "width: 155px;" })
       </td>
        <td>
      @{@Html.DropDownList("ddlNewValues", Model.OperandsMaxList, new { style = "height: 20px;" })
        }
       </td>
       <td colspan="2">
       @Html.TextBox("txtNewValues", "", new { @class = "numbersonly", style = "width: 250px;" })
    </td>
 </tr>

我为用户提供了 ADD 按钮，他们可以在运行时动态添加他们想要的TR（如上所示）。

目前使用以下代码使用JQUERY动态生成 TR

var txtNewAttributes = '<td><input type="text" name="txtNewAttributes' + (tblRows + 1) + '"  class="alphaonly" style = "width: 155px;" id="txtNewAttributes' + (tblRows + 1) + '" value="" /></td>';
    var ddlNewValues = '<td><select id="ddlNewValues' + (tblRows + 1) + '" style = "height: 20px;width:75px;" /></td>';
  var txtNewValues = '<td><input type="text" name="txtNewValues' + (tblRows + 1) + '" style = "width: 250px;" id="txtNewValues' + (tblRows + 1) + '" value="" /></td>';
  var repeatRow = txtNewAttributes + ddlNewValues + txtNewValues;
   $('#tblNewSearchAttribute tr:last').prev().after('<tr id="tblNewContentRow' + (tblRows + 1) + '">' + repeatRow + '</tr>');

但是我在渲染这些动态行后会有很多功能要做。目前使用dataEntered这种方式有点令人困惑。

我的问题是

有没有更好的方法可以解决这个问题，以便我可以轻松地将这些数据用于所有功能？
实施上述方案的最佳方式是什么？

请分享您的建议。

对MVC和Jquery来说都是新手。

由于

Answer 1

以下是对代码的一点改进，以便更轻松地进行数据检索：

使用class而不是id，例如类= 'txtAttributes'
应使用css进行样式设计，尽量避免使用样式代码。

您的addNewRow函数应如下所示：

function addNewRow(){
   var txtNewAttributes = "<td><input type='text' class='txtNewAttributes' /></td>";
   var ddlNewValues = "<td><select class='ddlNewValues'></select></td>";
   var txtNewValues = "<td><input type='text' class='txtNewValues' /></td>";
   var repeatRow = txtNewAttributes + ddlNewValues + txtNewValues;

   $('#tblNewSearchAttribute tr:last').prev().after('<tr class="tblNewContentRow">' + repeatRow + '</tr>');   
}

然后是数据检索功能：

function retrieveData(){
    var items = [];

    // loop for each row
    $("#tblNewSearchAttribute .tblNewContentRow").each(function(){
        var item = {
            txtNewAtribute: $(this).find(".txtNewAttributes").val(),
            ddlNewValues: $(this).find(".ddlNewValues").val(),
            txtNewValues: $(this).find(".txtNewValues").val()
        };
        items.push(item);
    });

    //  return the array of item, each item contains data for a table row
    return items;
}

如果您需要处理某些事件，例如处理表中所有txtNewValues的更改事件，您将看到使用class而不是id更好：

$("'#tblNewSearchAttribute").on("change", ".txtNewValues", function(){
     // do something
});

关于css：

#tblNewSearchAttribute .txtNewAttributes {
    width: 155px;
}

#tblNewSearchAttribute .ddlNewValues{
    height: 20px;
    width:75px;
}

使用MVC JQUERY建议创建动态控件

1 个答案: