Question

我有它，所以您在表格上输入最大数量，然后在单击按钮后创建表格。

我想要它，因此在单击按钮添加行之后，它会在表中写入一个下拉菜单，该菜单从0到您在表格中输入的数字

这是我的HTML代码：

<html>
<head>
    <title>Form Generator</title>
    <link rel="stylesheet" type="text/css" href="../css/converter.css"/>
    <script language="JavaScript" src="../js/exercise2.js" type="text/javascript">
    </script>
</head>
<body>
<p>
    <button class="button" data-modal="M2KM">Form Generator</button>
</p>
<div id="M2KM" class="modal">
    <div class="modal-content">
        <div class="form">
            <a class="close">&times;</a>
            <form action="">
                <textarea rows="1" name="Section" id="Section" cols="10">Section</textarea>
                <textarea rows="1" name="Max" id="Max" cols="10">Max</textarea>
                <textarea rows="1" name="Comment" id="Comment" cols="10">Comment</textarea>
                <textarea rows="1" name="Mark" id="Mark" cols="10">Mark</textarea>
                <input type="button" value="Add Row" name="Add Row" onclick="conversionTable('table')" />
                <input type="reset" value="Clear" name="Clear">
            </form>
            <div id="conversion">
                <table id="table">
                    <thead>
                        <tr>
                            <th>Section</th>
                            <th>Max</th>
                            <th>Comment</th>
                            <th>Mark</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>

这是我的JavaScript代码：

function   conversionTable(tagId, from, to)
{

    var section = document.getElementById("Section").value;
    var max = document.getElementById("Max").value;
    var comment = document.getElementById("Comment").value;
    var mark = document.getElementById("Mark").value;
    from = 0;
    to = 1;
    var total = 0;
    var arr = [];
    var conv = document.getElementById(tagId)  ;
    var pre = document.createElement("pre");
    conv.appendChild(pre);
    var body= conv.appendChild(document.createElement("tbody"));
    for (var i=from; i<to; i++)

    {   row = body.appendChild(document.createElement("tr"));
        var data=row.appendChild(document.createElement("td"));
        data.appendChild(document.createTextNode(section));
        data=row.appendChild(document.createElement("td"));
        data.appendChild(document.createTextNode(max));
        var data=row.appendChild(document.createElement("td"));
        data.appendChild(document.createTextNode(comment));
        data=row.appendChild(document.createElement("select"));
        data.setAttribute("id", "mySelect");
        row.appendChild(data);
        var z = document.createElement("option");
        z.setAttribute("value", "volvocar");
        var t = document.createTextNode("1");
        z.appendChild(t);
        document.getElementById("mySelect").appendChild(z);
        total = total + mark;
        var obj = {section: section, max: max, comment: comment, mark: mark};
        arr.push(obj);
    }
}

这是显示测试数据的屏幕截图：

Answer 1

这是一个简化的示例，其中添加了一个选择元素，其选择项的数目等于用户输入的数目。
请参阅代码中的注释，以了解其工作原理。

// Identifies existing HTML elements
const maxInput = document.getElementById("max");
const button = document.getElementById("button");
const table = document.getElementById("table");

// Calls `addDropdown` when `button` is clicked
button.addEventListener("click", addDropdown);


// Defines the event listener
function addDropdown(event) { //(`event` object is available if we want it)

  // Gets value from input
  let max = parseInt(maxInput.value);
  
  // Exits function early if maxInput doesn't have a number
  if(!max){ return; }

  // Defines the new elements
  const row = document.createElement("tr");
  const cell = document.createElement("td");
  const dropdown = document.createElement("select");

  // Enumerates options and adds them to the select element
  let optNumber = -1;
  while(++optNumber <= max){
    let optionElement = document.createElement("option");
    optionElement.value = "opt" + optNumber;
    optionElement.innerHTML = "Option " + optNumber;
    dropdown.appendChild(optionElement);
  }

  // Adds the elements to the page
  cell.appendChild(dropdown);
  row.appendChild(cell);
  table.appendChild(row);
}

<label>
  <span>Enter maximum value for dropdown:</span>
  <input id="max" value="5" />
</label>
<br />
<button id="button">Add Dropdown in New Row</button>
<div id="container">
  <table id="table"></table>
</div>

如何使用JavaScript创建动态下拉菜单

1 个答案: