css 如何从Javascript加载html.DropdownList到表< td>中

wlzqhblo 于 2023-05-30 发布在 Java

关注(0)|答案(1)|浏览(98)

在我的asp.net MVC应用程序中，我试图创建一个带有项目添加按钮的采购订单视图。
因此，对于第一个**<-td>标签**，我想显示下拉列表和其他带有输入文本字段的列。
然后使用javascript将行添加到表中。
想知道如何从javascript中添加与当前样式（td width和class）相同的输入。
这是我现在的代码
HTML

<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>

简体中文

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;
}

这是当前视图的外观
点击【添加】按钮前

点击【新增】按钮后

css

来源：https://stackoverflow.com/questions/76345590/how-to-load-html-dropdownlist-to-the-table-td-from-javascript

1条答案

按热度按时间

kpbwa7wx1#

下面是修改后的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;
    }

希望它的工作！！

赞(0）回复(0）举报 2023-05-30

我来回答

css 如何从Javascript加载html.DropdownList到表< td>中

1条答案

相关问题

热门标签

最新问答