首页 > 解决方案 > 在 AngularJS 或 html 或 Javascript 中,需要根据下拉选择将单元格添加到表格中

问题描述

我有一个下拉框:

 <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>
   <tr>
     <td>row </td>
     <td><input></input></td> 
   </tr>                   
 </table> 

我需要尽可能多

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

作为用户在下拉列表中选择的。我怎样才能在 AngularJs 中做到这一点?还是html?还是JavaScript?

标签: javascripthtmlangularjsdropdown

解决方案


您可以使用 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>


推荐阅读