如何基于选择id选项值更改表的行和列？

Question

How can I change the number of rows and columns of a html table with the input text, based on the value selected in the select Id option? 如何根据选择ID选项中选择的值，用输入文本更改html表的行数和列数？ like Number of Models : 1,2,3,4 像型号数：1,2,3,4
Number of items per Model :(this is the table that takes the input values and this needs to change the number of rows or columns of the table based on the value selected in the 'Number of Models'), this is the code i have: 每个模型的项目数：（这是带有输入值的表，需要根据“模型数”中选择的值来更改表的行数或列数），这是我拥有的代码：

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

can somebody give me the javascript function ItemsModelValidate() to make this work ? 有人可以给我JavaScript函数ItemsModelValidate（）来完成这项工作吗？

I have the following javascript function for other purpose, can this be edited to achieve that ? 我有以下javascript函数用于其他用途，可以对此进行编辑以实现该功能吗？

  function ItemsModelValidate(){
   $itemsmodel = document.getElementById("itemsmodel").value;
       if(!/^[0-9]+$/.test($itemsmodel)) {
           alert();
       } 
           } 
     function NumbersOfModels(){
   $numberofmodels = document.getElementById("numberofmodels").value;
       if(!/^[0-9]+$/.test($numberofmodels)) {
           alert();
       } 
           }

Answer 1

You can use something like this: 您可以使用如下形式：

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

如何基于选择id选项值更改表的行和列？

问题描述

1 个解决方案

解决方案1
0 2013-09-17 18:59:07

如何基于选择id选项值更改表的行和列？

问题描述

1 个解决方案

解决方案1 0 2013-09-17 18:59:07

解决方案1
0 2013-09-17 18:59:07