js获取当前表格内input输入框的数据
时间: 2023-04-12 08:01:55 浏览: 97
可以使用以下代码获取当前表格内input输入框的数据:
var table = document.getElementById("tableId");
var inputs = table.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
var value = input.value;
console.log(value);
}
相关问题
layui 表格内嵌套input输入框
在Layui表格中嵌套input输入框,可以通过自定义列模板实现。
下面是一个示例代码:
```javascript
<table class="layui-table">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>名称1</td>
<td>
<input type="text" class="layui-input" placeholder="请输入内容">
</td>
</tr>
<tr>
<td>2</td>
<td>名称2</td>
<td>
<input type="text" class="layui-input" placeholder="请输入内容">
</td>
</tr>
</tbody>
</table>
```
在上面的代码中,我们在表格中的操作列中嵌套了一个input输入框,通过设置class为layui-input,可以使用Layui的样式。
如果需要动态添加行,可以通过Layui的table.render()方法进行渲染,示例代码如下:
```javascript
var data = [{
id: 1,
name: '名称1'
}, {
id: 2,
name: '名称2'
}];
table.render({
elem: '#demo',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'},
{field: 'operation', title: '操作', templet: '#operationTpl'}
]],
data: data
});
// 自定义列模板
<script type="text/html" id="operationTpl">
<input type="text" class="layui-input" placeholder="请输入内容">
</script>
```
在上面的代码中,我们使用了自定义列模板,将input输入框嵌套在了操作列中。然后使用table.render()方法进行渲染,其中的operation列设置了templet属性,值为自定义模板的id。这样就可以动态添加行,并且在操作列中嵌套input输入框了。
el-input输入框设置模糊查询表格数据
要实现在 el-input 输入框中进行模糊查询表格数据,你可以按照以下步骤进行操作:
1. 在 el-input 中添加 v-model 指令来绑定输入框的值,例如: `<el-input v-model="searchText"></el-input>`
2. 在表格的数据源中添加一个筛选方法,在该方法中实现模糊查询的逻辑。例如,你可以使用 JavaScript 的 filter() 方法来过滤数据。示例代码如下:
```
data() {
return {
searchText: '',
tableData: [ /* your table data here */ ]
}
},
computed: {
filteredData() {
return this.tableData.filter(item => {
return item.name.toLowerCase().includes(this.searchText.toLowerCase());
});
}
}
```
在上述代码中,我们使用了 computed 属性来创建一个计算属性 filteredData,它会根据输入框的值进行过滤。我们使用 filter() 方法来对表格数据进行过滤,只保留包含搜索文本的数据项。
3. 在表格中使用 filteredData 替代原始的 tableData 来展示过滤后的数据。例如:
```
<el-table :data="filteredData">
<!-- 表格列定义 -->
</el-table>
```
现在,当你在输入框中输入文本时,表格会根据输入的内容进行模糊查询并展示匹配的数据项。
希望这个解答对你有帮助!如果有任何疑问,请随时提问。