业余编程爱好者-俊哥

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
$(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");
        })
    }
})


效果图

 

posted on 2020-03-31 16:49  业余编程爱好者-俊哥  阅读(129)  评论(0)    收藏  举报