jQuery 表格点击单元格 行和列加亮

$(document).ready(function () {
   //给表table  设置class="MyTable"

    /*以下是class名称 请用下面的名称自定义样式
     SelectTr:选中的tr行
     SelectTd :选中的td单元格
     SelectTd2:选中的td竖列
       */
    var selecttr //选中的tr
    var selecttd //选中的td
    var cellindex //选中的单元格td序号
   // var rowindex
    $(".MyTable tr").click(function () {//点击tr 设置tr的 Class
        if (selecttr != null) { selecttr.removeClass("SelectTr") }
        $(this).addClass("SelectTr");
        selecttr = $(this);
       // rowindex = this.rowIndex;


    })

    $(".MyTable td").click(function () {//点击td 设置td的class
        if (selecttd != null) { $(selecttd).removeClass("SelectTd") }
        $(this).addClass("SelectTd");
        selecttd = this;
        setcolumn(this.cellIndex)
        cellindex = this.cellIndex;
    })

    //设置竖列样式
    function setcolumn(newcellindex) {
        $(".MyTable tr").each(function () {
            var td1 = $(this).children("td")[cellindex]
            $(td1).removeClass("SelectTd2");

            var td2 = $(this).children("td")[newcellindex]
            $(td2).addClass("SelectTd2");
        })
    }
})


效果图

猜你喜欢

转载自www.cnblogs.com/yangjun806/p/12606280.html