Question

我正在尝试使用jquery clone函数修复表头。克隆功能正常工作但滚动之前我的标题不可见。滚动后克隆表正常工作。需要在滚动之前显示表头并在滚动后克隆表头

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();
    }
});

Answer 1

<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表头克隆问题

1 个答案: