Javascript 如何根据select id选项值更改表的行和列？_Javascript_Html

Javascript 如何根据select id选项值更改表的行和列？

javascript html

Javascript 如何根据select id选项值更改表的行和列？,javascript,html,Javascript,Html,如何根据在select Id选项中选择的值，使用输入文本更改html表的行数和列数？喜欢型号：1,2,3,4 每个模型的项目数：（这是接受输入值的表，需要根据“模型数”中选择的值更改表的行数或列数），这是我的代码： <table> <tr> <th>Number of Models:<title="Number of Models"></th> <td><select id="numberof

如何根据在select Id选项中选择的值，使用输入文本更改html表的行数和列数？喜欢型号：1,2,3,4
每个模型的项目数：（这是接受输入值的表，需要根据“模型数”中选择的值更改表的行数或列数），这是我的代码：

      <table>
  <tr>
  <th>Number of Models:<title="Number of Models"></th>

<td><select id="numberofmodels" onkeyup="NumberOfModels()" name="Number of Models">

  <option >1</option >
  <option >2</option >
  <option >3</option >
  <option >4</option >
  <option >5</option >
  <option >6</option >
  </select></td>
  </tr>

  <tr>
  <th>Number of items per model:</th>
  <td>
  <table border="1">
       <tr>
      <td>
<input id="itemsmodel" onkeyup="ItemsModelValidate()" type="text" maxlength="50" >       <br>

</td>
      </tr>
     </table>

您可以使用以下内容：

<html>
<body>
<table>
    <tr>
        <th>Number of Models:</th>
        <th>
            <select id="NumberOfModels" name="Number of Models">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
            </select>
        </th>
    </tr>
    <tr>
        <th>Number of items per model:</th>
    </tr>
    <tr>
        <td>
            <table border="1">
                <tbody id="itemsmodel"></tbody>
            </table>
        </td>
    </tr>
</table>

<script type="text/javascript">
    var  models = document.getElementById("NumberOfModels");
    var  modelsTable = document.getElementById("itemsmodel");

    models.addEventListener("change", drawModels, false);

    function drawModels(){
        var modelsNum = parseInt(models.value);
        var curModels = modelsTable.rows.length;
        if (modelsNum > curModels)  {
            var delta = modelsNum - curModels;
            for(var i = 0; i < delta; i++)  {
                var rowElement = document.createElement("tr");
                var cellElement = document.createElement("td");
                var input = document.createElement("input");
                input.setAttribute("maxlength", "3");
                input.addEventListener("keyup", drawItems, false);
                cellElement.appendChild(input);
                rowElement.appendChild(cellElement);
                modelsTable.appendChild(rowElement);
            }
        } else {
            while(modelsTable.rows.length > modelsNum){
                var row = modelsTable.rows[modelsTable.rows.length - 1];
                modelsTable.removeChild(row);
            }
        }
    }

    function drawItems(){
        var row = this.parentNode.parentNode;
        var val = this.value;
        var isNum = /^\d+$/.test(val);
        if(isNum){
            var curCells = row.cells.length - 1;
            var cellsNum = parseInt(val);
            if(cellsNum > curCells){
                var delta = cellsNum - curCells;
                for(var i = 0; i < delta; i++)  {
                    var cellEl = document.createElement("td");
                    cellEl.innerText = "Lorem  ipsum";
                    row.appendChild(cellEl);
                }
            } else {
                while(row.cells.length > cellsNum + 1) {
                    var cell = row.cells[row.cells.length-1];
                    row.removeChild(cell);
                }
            }
        }
    }

    drawModels();
</script>
</body>
</html>


型号数量：
1.
2.
3.
4.
5.
6.
每个型号的项目数：
var模型=document.getElementById（“NumberOfModels”）；
var modelsTable=document.getElementById（“itemsmodel”）；
模型。addEventListener（“更改”，drawModels，false）；
函数模型（）{
var modelsum=parseInt（models.value）；
var curModels=modelsTable.rows.length；
if（modelsum>curModels）{
var delta=模型SNUM-curModels；
对于（变量i=0；imodelsNum）{
var row=modelsTable.rows[modelsTable.rows.length-1]；
modelsTable.removeChild（行）；
}
}
}
函数drawItems（）{
var row=this.parentNode.parentNode；
var val=该值；
var isNum=/^\d+$/.test（val）；
if（isNum）{
var curCells=row.cells.length-1；
var cellsum=parseInt（val）；
if（cellsum>curCells）{
var delta=cellsNum-curCells；
对于（变量i=0；icellsNum+1）{
var cell=row.cells[row.cells.length-1]；
行。removeChild（细胞）；
}
}
}
}
drawModels（）；

请给我们代码好吗？你能更具体一点吗？所以规则“禁止”我们给出完整的答案，请告诉我们你得到了什么。您在select的id中使用空格，这在该属性中是不允许的。这是我得到的，表接受输入，表的行数和列数“取决于”选项中选择的值。当我将“模型数”选择为2时，“每个模型的项目数”的表大小应将行数和/或列数增加到2以容纳输入，但上述代码就是这样，即使我选择了不同的选项，行数/列数也保持不变。

<html>
<body>
<table>
    <tr>
        <th>Number of Models:</th>
        <th>
            <select id="NumberOfModels" name="Number of Models">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
            </select>
        </th>
    </tr>
    <tr>
        <th>Number of items per model:</th>
    </tr>
    <tr>
        <td>
            <table border="1">
                <tbody id="itemsmodel"></tbody>
            </table>
        </td>
    </tr>
</table>

<script type="text/javascript">
    var  models = document.getElementById("NumberOfModels");
    var  modelsTable = document.getElementById("itemsmodel");

    models.addEventListener("change", drawModels, false);

    function drawModels(){
        var modelsNum = parseInt(models.value);
        var curModels = modelsTable.rows.length;
        if (modelsNum > curModels)  {
            var delta = modelsNum - curModels;
            for(var i = 0; i < delta; i++)  {
                var rowElement = document.createElement("tr");
                var cellElement = document.createElement("td");
                var input = document.createElement("input");
                input.setAttribute("maxlength", "3");
                input.addEventListener("keyup", drawItems, false);
                cellElement.appendChild(input);
                rowElement.appendChild(cellElement);
                modelsTable.appendChild(rowElement);
            }
        } else {
            while(modelsTable.rows.length > modelsNum){
                var row = modelsTable.rows[modelsTable.rows.length - 1];
                modelsTable.removeChild(row);
            }
        }
    }

    function drawItems(){
        var row = this.parentNode.parentNode;
        var val = this.value;
        var isNum = /^\d+$/.test(val);
        if(isNum){
            var curCells = row.cells.length - 1;
            var cellsNum = parseInt(val);
            if(cellsNum > curCells){
                var delta = cellsNum - curCells;
                for(var i = 0; i < delta; i++)  {
                    var cellEl = document.createElement("td");
                    cellEl.innerText = "Lorem  ipsum";
                    row.appendChild(cellEl);
                }
            } else {
                while(row.cells.length > cellsNum + 1) {
                    var cell = row.cells[row.cells.length-1];
                    row.removeChild(cell);
                }
            }
        }
    }

    drawModels();
</script>
</body>
</html>