jquery - 如何使用jquery将数据库中的数据添加到表中的动态文本框中

Question

我创建了一个动态表，用户可以添加行，如下例所示。

从下面的代码创建的动态行:

<table id="newrow" style="display:none;">
    <tr style="background-color:#ffffff;">
        <td style="font-weight:bold;padding-left:5px;padding-top:0px;padding-bottom:0px;padding-right:0px;vertical-align:middle"></td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The TargetColor_U field is required." id="TargetInfo_#__TargetColor_U" name="TargetInfo[#].TargetColor_U" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].TargetColor_U" data-valmsg-replace="true"></span>*@
            <input type="hidden" name="TargetInfo.Index" value=# />
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The TargetColor_V field is required." id="TargetInfo_#__TargetColor_V" name="TargetInfo[#].TargetColor_V" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].TargetColor_V" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The D90Target_U field is required." id="TargetInfo_#__D90Target_U" name="TargetInfo[#].D90Target_U" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].D90Target_U" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The D90Target_V field is required." id="TargetInfo_#__D90Target_V" name="TargetInfo[#].D90Target_V" style="text-align:center;" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].D90Target_V" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The D10Target_U field is required." id="TargetInfo_#__D10Target_U" name="TargetInfo[#].D10Target_U" style="text-align:center;" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].D10Target_U" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The D10Target_V field is required." id="TargetInfo_#__D10Target_V" name="TargetInfo[#].D10Target_V" style="text-align:center;" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].D10Target_V" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The Thickness field is required." id="TargetInfo_#__Thickness" name="TargetInfo[#].Thickness" style="text-align:center;" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].Thickness" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The FilmWidth field is required." id="TargetInfo_#__FilmWidth" name="TargetInfo[#].FilmWidth" style="text-align:center;" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].FilmWidth" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px">
            <input class="form-control" data-val="true" data-val-required="The TargetDate field is required." id="TargetInfo_#__TargetDate" name="TargetInfo[#].TargetDate" style="text-align:center;" type="text" value="" />
            @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].TargetDate" data-valmsg-replace="true"></span>*@
        </td>
        <td style="padding:0px;vertical-align:top;">
            <img id="imgRemoveTarget" alt="Item Lookup" src="/Content/images/trashcan.png" style="cursor:pointer;width:32px;height:29px;" class="deleteLink" />
        </td>
    </tr>

</table>

生成动态行的jquery代码如下:

  var form = $('#tttt'); // or use the id if you have given the form an id
  var newrow = $('#newrow');
  var tablebody = $('#tbTargetDetailsBody'); // modify to suit your id

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

  var index = (new Date()).getTime(); // unique indexer
  var clone = newrow.clone(); // clone the new row
  clone.html($(clone).html().replace(/#/g, index)); // update the indexer of the clone

  var row = clone.find('tr');
  tablebody.append(row);


  // Reparse the validator
  form.data('validator', null);
  $.validator.unobtrusive.parse(form);

现在我想根据数据库中的数据在表中添加数据。下面是我的代码:

 fnAddTargetInfo = function (RequestNumberitem, FormID) {
        jQuery.getJSON(
           "/SECEditors/fnGetTargetInfo/", { ReqNo: RequestNumberitem },
             function (data) {
                 if (data != null) {

                     jQuery.each(data, function (i, valTarget) { //already get the data insie db
                        // need to loop the table and put the db data inside the dynamic textbox


                         // Reparse the validator
                         FormID.data('validator', null);
                         $.validator.unobtrusive.parse(FormID);
                     });
                 }
             }
         );
    }

非常感谢你们的帮助。谢谢。

Answer 1

假设这是您的众多单元格之一

<td style="padding:0px">
        <input class="form-control" data-val="true" data-val-required="The TargetColor_U field is required." id="TargetInfo_#__TargetColor_U" name="TargetInfo[#].TargetColor_U" type="text" value="" />
        @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].TargetColor_U" data-valmsg-replace="true"></span>*@
        <input type="hidden" name="TargetInfo.Index" value=# />
    </td>

您需要做的是为每个输入提供一个标识符类(或 id，但我更喜欢类)，这样生成的 td 就会像这样

<td style="padding:0px">
        <input class="form-control txtColor" data-val="true" data-val-required="The TargetColor_U field is required." id="TargetInfo_#__TargetColor_U" name="TargetInfo[#].TargetColor_U" type="text" value="" />
        @*<span class="field-validation-valid" data-valmsg-for="TargetInfo[#].TargetColor_U" data-valmsg-replace="true"></span>*@
        <input type="hidden" name="TargetInfo.Index" value=# />
    </td>

确保您正在插入该行。在您的 jQuery 迭代中，您需要按如下方式调用它:

jQuery.each(data, function (i, valTarget) { 
          var row = clone.find('tr');  
          var txtColor =  row.find('input.txtColor'); // or find('.txtColor')
          txtColor.val(valTarget.TargetColor_U);
          FormID.data('validator', null);
          $.validator.unobtrusive.parse(FormID);
 });