jquery - 表格行选中后上移下移

風花_10969

于 2019-05-22 10:48:02 发布

阅读量363

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_40156417/article/details/90439466

版权

// 单选框
$("body").on("click", ".checkbox-only", function() {
    if ($(this).is(".onlychange")) {
        $(this).removeClass("onlychange");
    } else {
        $(this).addClass("onlychange");
    }
    $(this).parents("td").parents("tr").siblings().find("input").removeClass("onlychange");
});

//单选框点击向上移
$("body").on("click", ".btn-up", function() {
    var upHTML = $(".onlychange").parent().parent();
    if($(".checkbox-only").index($(".onlychange")) > 0){
        var obj = upHTML.clone(true);
        var preHTML = upHTML.prev();
        preHTML.before(obj);
        upHTML.remove();
    }
});
//单选框点击向下移
$("body").on("click", ".btn-down", function() {
    var downHTML = $(".onlychange").parent().parent();
    var aTr = $(".checkbox-only").parents("td").parents("tr").parents("tbody").children().length-1;
    if($(".checkbox-only").index($(".onlychange")) < aTr){
        var obj = downHTML.clone(true);
        var nextHTML = downHTML.next();
        nextHTML.after(obj);
        downHTML.remove();
    }
});

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="checkbox-only"></td>
        </tr>
    </tbody>
</table>

/*单选框*/
.checkbox-only {
    width: 17px;
    height: 17px;
    float: left;
    padding-left: 5px;
    font-size: 14px;
    font-weight: inherit;
    margin-bottom: 0;
    margin-top: 4px;
    cursor: pointer;
}
.checkbox-only i {
    vertical-align: middle;
    color: #2391DF;
    font-size: 20px;
}
.checkbox-only:before {
    content: "\e8ef";
    font-family: "iconfont" !important;
    margin-right: 5px;
    font-size: 16px;
    vertical-align: middle;
    color: #b9b9b9;
    background: #fff;
    float: left;
}
.onlychange:before {
    content: "\e8f1";
    font-family: "iconfont" !important;
    color: #2391DF;
}