如何基於選擇id選項值更改表的行和列？

Question

如何根據選擇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();
       } 
           }

Answer 1

您可以使用如下形式：

<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