0

如何根据在 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>

有人可以给我 javascript 函数 ItemsModelValidate() 来完成这项工作吗？

我有以下 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();
       } 
           }
4

1 回答 1

0

你可以使用这样的东西：

<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>
于 2013-09-17T18:59:07.407 回答