您说:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>动态可编辑表格</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<style>
.table-container {
max-width: 100%;
overflow-x: auto;
white-space: nowrap;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
text-align: center;
padding: 8px;
}
</style>
</head>
<body>
<div class="table-container">
<table id="editableTable" class="layui-table">
<thead>
<tr>
<th style="width: 40px;">序号</th>
<th style="min-width: 130px;">名称</th>
<th style="min-width: 60px;">单位</th>
<th>数量</th>
<th>买入价格</th>
<th>卖出价格</th>
<th>欠款</th>
<th>分类</th>
<th style="min-width: 150px;">备注</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 数据行将在这里动态添加 -->
</tbody>
</table>
<button class="layui-btn layui-btn-normal" onclick="addRow()">添加行</button>
</div>
<script src="./js/jquery.js"></script>
<script src="./layui/layui.js"></script>
<script>
layui.use(['form'], function(){
var form = layui.form;
window.addRow = function() {
var index = $("#editableTable tbody tr").length + 1;
var rowHtml =
<tr>
<td>${index}</td>
<td>
<select name="name[]" lay-filter="nameSelect" class="layui-input">
<option value="">请选择名称</option>
<!-- 这里动态加载选项 -->
</select>
</td>
<td><input type="text" class="layui-input" name="unit[]" readonly></td>
<td><input type="number" class="layui-input" name="quantity[]"></td>
<td><input type="number" class="layui-input" name="buyPrice[]" readonly></td>
<td><input type="number" class="layui-input" name="sellPrice[]" readonly></td>
<td>
<input type="checkbox" name="debt[]" title="是" lay-skin="switch">
</td>
<td>
<select name="category[]" class="layui-input">
<option value="">请选择分类</option>
<!-- 分类选项 -->
</select>
</td>
<td><textarea name="remarks[]" class="layui-textarea"></textarea></td>
<td><button class="layui-btn layui-btn-danger" onclick="removeRow(this)">删除</button></td>
</tr>;
$("#editableTable tbody").append(rowHtml);
form.render(); // 更新渲染
};
window.removeRow = function(elem) {
$(elem).closest('tr').remove();
// 可以添加更新序号的逻辑
};
// 可以添加监听下拉框选项变化的代码
form.on('select(nameSelect)', function(data){
// 根据选中的值,请求后端获取对应信息并填充其他字段
});
// 初始化添加一行
addRow();
});
</script>
</body>
</html>
这里在这个时候form.on('select(nameSelect)', function(data){
// 根据选中的值,请求后端获取对应信息并填充其他字段
});
当前行的输入框赋值怎么写