javascript - 在 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?
解决方案
您可以使用 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>
推荐阅读
- c# - 使用 JSON 将数据输出从数据库渲染到 Highcharts
- java - Spring Boot Batch:需要将 JobExecutionContext 放入 ItemWriteListener
- javascript - Django - 数据未提交到我的数据库,但没有错误
- angular - Angular Reactive Forms - 自定义验证中的 .disable() 导致“超出最大调用堆栈大小”
- javascript - 如何从角度的开始月份禁用或只读日期选择器月份?
- python - 如何在 numpy 数组中插入经过轻微修改的序列?
- javascript - 从 google api 函数返回 lat 和 lng
- swift - 我们可以使用 Cocoa Swift 在 Mac 上挂载/卸载设备/磁盘/usb 吗?
- react-hooks - 使用带有 React DND 的句柄
- asp.net-core - asp.net 核心身份在使用 cookie 和 jwt 身份验证方案时避免重复声明