Как изменить строки и столбцы таблицы на основе значения параметра выбора идентификатора?

Question

Как изменить строки и столбцы таблицы на основе значения параметра выбора идентификатора?

0

Как изменить количество строк и столбцов таблицы 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();
       } 
           }

Sachin 17 сен. 2013, в 20:51

Источник

Теги:

javascript

html

1 ответ

Ещё вопросы

Anton · Answer 1 · 2013-09-17T17-35-00.000Z

Вы можете использовать что-то вроде этого:

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

когда я выбираю «количество моделей» как 2, размер таблицы «количество элементов на модель» должен увеличить количество строк и / или столбцов до 2, чтобы вместить ввод, но это происходит с приведенным выше кодом, количество строки / столбцы остаются неизменными, даже когда я выбираю другой вариант.
Я исправил ответ. Теперь это правильно?