在我的ASP.NET MVC應用程序中，我試圖創建一個帶有項目添加按鈕的采購訂單視圖。

所以第一次& lt-TD & gt；標簽我想顯示下拉列表和其他輸入文本字段的列。

然后使用javascript將這些行添加到表中。

想知道如何從javascript中添加與當前樣式(td寬度和類別)相同的輸入。

這是我當前的代碼

超文本標記語言

<tbody class="table-border-bottom-0">
   <tr id="tablerow0">
     <td>
       <strong> 1</strong>
     </td>
     <td width="40%"> @Html.DropDownList("Item_ID", null, "--Select the Item--", htmlAttributes: new { @class = "form-select", @Id = "Company", oninvalid = "this.setCustomValidity('Select the Item')", oninput = "this.setCustomValidity('')", name = "Item_Id[0]" }) @* <input name="Item_Id[0]" type="text" value="" required="required" class="form-control" />*@ </td>
     <td width="10%">
       <input name="AdditionalComments[0]" type="text" value="" required="required" class="form-control" />
     </td>
     <td width="10%">
       <input name="AcidStables[0]" type="text" value="" class="form-control" />
     </td>
     <td width="20%">
       <input name="AcidStables[0]" type="text" value="" class="form-control" />
     </td>
     <td width="20%">
       <input name="AcidStables[0]" type="text" value="" class="form-control" />
     </td>
     <td>
       <button type="button" class="btn btn-danger" onclick="removeTr(0);">x</button>
     </td>
   </tr>
 </tbody>

<p>
   <button id="add" type="button" class="btn btn-primary">Add</button>
</p>

java描述語言

var counter = 2;
$(function () {
  $('#add').click(function () {
    $('<tr id="tablerow' + counter + '"> ' +
      '<td >' +
      '<label id="CountItems" > <strong>' + counter + '</strong> </label> </td>' +
      '<td width="40%">' +
      '<input type="text" class="text-box single-line"  name="Item_Id[' + counter + ']" value="" required="required"  />' +
      '</td>' +

      '<td width="10%">' +
      '<input type="text" class="text-box single-line"  name="AcidStables[' + counter + ']" value="" required="required" />' +
      '</td>' +
      '<td width="10%">' +
      '<input type="text" class="text-box single-line"  name="AcidStables[' + counter + ']" value="" required="required" />' +
      '</td>' +
      '<td width="20%">' +
      '<input type="text" class="text-box single-line"  name="AcidStables[' + counter + ']" value="" required="required" />' +
      '</td>' +
      '<td width="20%">' +
      '<input type="text" class="text-box single-line"  name="AcidStables[' + counter + ']" value="" required="required" />' +
      '</td>' +
      '<td>' +
      '<button type="button" class="btn btn-danger" onclick="removeTr(' + counter + ');">x</button>' +
      '</td>' +
      '</tr>').appendTo('#submissionTable');
    counter++;
    return false;
  });
});

function removeTr(index) {
  if (counter > 1) {
    $('#tablerow' + index).remove();
    counter--;
  }
  return false;
}

這是當前視圖的外觀

在點擊添加按鈕之前

點擊添加按鈕后

下面是修改后的JavaScript代碼:

var counter = 2;
    var dropdownOptions = [
      {
        value: "option1",
        text: "Option 1",
      },
      {
        value: "option2",
        text: "Option 2",
      },
      {
        value: "option3",
        text: "Option 3",
      },
    ];
    
    $(function () {
      $("#add").click(function () {
        var newRow = $(
          '<tr id="tablerow' +
            counter +
            '"> ' +
            "<td>" +
            '<label id="CountItems"><strong>' +
            counter +
            "</strong></label>" +
            "</td>" +
            '<td width="40%">' +
            '<select class="form-select" name="Item_Id[' +
            counter +
            ']" required="required">' +
            "</select>" +
            "</td>" +
            '<td width="10%">' +
            '<input type="text" class="text-box single-line" name="AdditionalComments[' +
            counter +
            ']" value="" required="required" />' +
            "</td>" +
            '<td width="10%">' +
            '<input type="text" class="text-box single-line" name="AcidStables[' +
            counter +
            ']" value="" required="required" />' +
            "</td>" +
            '<td width="20%">' +
            '<input type="text" class="text-box single-line" name="AcidStables[' +
            counter +
            ']" value="" required="required" />' +
            "</td>" +
            '<td width="20%">' +
            '<input type="text" class="text-box single-line" name="AcidStables[' +
            counter +
            ']" value="" required="required" />' +
            "</td>" +
            "<td>" +
            '<button type="button" class="btn btn-danger" onclick="removeTr(' +
            counter +
            ');">x</button>' +
            "</td>" +
            "</tr>"
        );
    
        var selectElement = newRow.find("select"); // Find the <select> element in the new row
    
        // Populate the <select> element with options
        dropdownOptions.forEach(function (option) {
          var optionElement = $("<option>").val(option.value).text(option.text);
          selectElement.append(optionElement);
        });
    
        newRow.appendTo("#submissionTable");
        counter++;
        return false;
      });
    });
    
    function removeTr(index) {
      if (counter > 1) {
        $("#tablerow" + index).remove();
        counter--;
      }
      return false;
    }

希望它的工作！！