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

Как изменить количество строк и столбцов таблицы html с входным текстом на основе значения, выбранного в опции выбора идентификатора? , как Количество моделей: 1,2,3,4
Количество элементов на модель: (это таблица, которая принимает входные значения, и это необходимо для изменения количества строк или столбцов таблицы на основе значения выбран в «Количество моделей»), это код, у меня есть:Как изменить строки и столбцы таблицы на основе значения параметра id id?

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

может кто-нибудь дать мне яваскрипта функцию 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(); 
     } 
      }

источник

2013-09-17 Sachin

Может у нас есть код, пожалуйста? – Damon

вы можете уточнить? –

SO правила «запрещают» нам дать полный ответ, пожалуйста, покажите нам, что у вас есть. И вы используете пробелы в идентификаторе выбора, который не допускается в том атрибуте – Martijn

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

<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-17 18:59:07 Anton

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

Я исправил ответ. Правильно ли сейчас? – Anton

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

ответ

Смежные вопросы