在 AngularJS 或 html 或 Javascript 中，需要根据下拉选择将 <td> 个单元格添加到 table

Question

我有一个下拉框：

 <select ng-model="numberselected">    
   <option value="">Select One</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
 </select>

我有一个 table:

 <table>
   <tr>
     <td>row </td>
     <td><input></input></td> 
   </tr>                   
 </table>

我需要那么多

 <td><input></input></td>

作为用户在下拉列表中选择的。我如何在 AngularJs 中执行此操作？还是html？或 javascript?

Answer 1

您可以使用 insertCell，为此您必须获取要添加 td

的行

const SelectedVal = (e)=>{
    let element = document.getElementById('row')
    let i = parseInt(e.value)
  let numberTd = [...element.childNodes].filter(el=>{return el.tagName == 'TD'}).length
  
  for(let z = 0;z<numberTd;z++){
     element.deleteCell(0)
  }
  
  for(let x = 0;x<i;x++){
  var tdAdded = element.insertCell(0);
  tdAdded.innerHTML = "New cell";
  }
}

 <table>
   <tr id="row">
     <td>row </td>
   </tr>                   
 </table> 
 
  <select onchange="SelectedVal(this)" >    
   <option value="">Select One</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
 </select>

在 AngularJS 或 html 或 Javascript 中，需要根据下拉选择将 <td> 个单元格添加到 table

In AngularJS or html or Javascript, need to add <td> cells to a table based on dropdown selection

html

javascript

angularjs

dropdown