gpt4 book ai didi

PHP/Jquery 创建和操作表

转载 作者:行者123 更新时间:2023-12-01 06:22:42 25 4
gpt4 key购买 nike

我正在寻找一种方法,根据从下拉列表或 slider 中选择的值向表格添加其他行。

将此视为一个非常基本的表格:

<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<thead><tr>
<th>Name</th>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
</thead><tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
<br>
</body>
</html>

我想添加一个下拉列表或 slider ,允许用户增加或减少可见的行数以及他们可以完成的行数。然后,当提交表单时,所有值都将正常提交。知道我该怎么做吗?

我还想在最后一列中使用复选框,以允许用户将除名称之外的所有值从第一行复制到他们检查的任何行。这可能吗?特别是如果他们更新第一行,其他人会更新吗?

非常感谢您的指点或链接:)

最佳答案

给你。专为您定制的编码

Live Demo

$(function(){
var $tbody = $("#tb1"),$firstRow=$("#tb1 tr").eq(0);
$('#defaultSlider').change(function(){
var val = this.value;
$('#currentValue').html(val);
$tbody.find("tr:gt("+val+")").remove();
for (var i = $("#tb1 tr").length;i<val;i++) {
$tbody.append('<tr><td></td><td></td><td></td><td></td><td></td><td></td><td><input type="checkbox" class="copy"/></td></tr>');
}
}).change(); // Trigger the event on load, so the table is populated:

$firstRow.find("input[type=text]").each(function(i) {
$(this).on("blur",function() { // or keyup if useful
var val = $(this).val();
var idx = i;
var $checked = $("#tb1 tr").find("input[type=checkbox]:checked");
$checked.each(function(i) {
if (i>0) {
// we may want to keep existing input
// perhaps even uncheck row if inout changed, but for now overwrite
$(this).closest("tr").find("input").eq(idx).val(val);
}
});
});
});
$tbody.on("change","tr .copy",function() {
if (this.checked) {
var $newRow = $firstRow.clone(true);
$newRow.find("td:first input").val("")
$(this).closest("tr").replaceWith($newRow);
}
});
});

关于PHP/Jquery 创建和操作表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17587730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com