我正在尝试使用 jquery 克隆函数修复表头。克隆功能正常工作，但在滚动之前我的标题不可见。滚动后克隆表正常工作。滚动前需要显示表头，滚动后需要显示克隆表头
var tableOffset = $("#myTable").offset().top;
var $header = $("#myTable > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(".table-container").bind("scroll", function () {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.fadeIn(2000);
} else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
最佳答案
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<input type="button" name="new_btn" value="NEW" onclick="add()">
<table>
<tr id="col_tr" style="display: none">
<td>
<input type="button" name="inc_btn" id="inc_" value="+">
<input type="text" name="qty" id="qty_" value="0">
<input type="button" name="dec_btn" id="dec_" value="-">
</td>
</tr>
</table>
</body>
<script>
var i = 0;
function add() {
if (i < 3) {
var template = $("#col_tr").clone();
template.css('display', '');
template.prop('class','main');
template.find("#inc_").replaceWith('<input type="button" name="inc_btn" onclick="increment(' + i + ')" id="inc_' + i + '" value="+">')
template.find("#qty_").replaceWith('<input type="text" name="qty" id="qty_' + i + '" value="0">')
template.find("#dec_").replaceWith('<input type="button" name="dec_" id="dec_' + i + '" onclick="decrement(' + i + ')" value="-">')
$("#col_tr").after(template);
i++;
}else{
$(".main").remove();
i=0;
}
}
function increment(j) {
var val = $("#qty_" + j).val();
var total = ++val;
$("#qty_" + j).val(total);
}
function decrement(j) {
var val = $("#qty_" + j).val();
var total = --val;
$("#qty_" + j).val(total);
}
</script>
</html>
关于jquery 表头克隆问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24007311/