jQuery form click on the cell row and column highlighted

$ (Document) .ready ( function () {
    // a = table table setting class "the MyTable" 

    / * The following is the class name of the following reference name of the custom styles 
     SelectTr: tr selected row 
     SelectTd: td cells selected 
     SelectTd2 : selected td vertical columns 
       * / 
    var selecttr // selected TR 
    var selecttd // selected td 
    var the cellIndex // selected cell number td 
   // var rowIndex 
    $ ( "MyTable TR.") the Click (. function () { // click tr tr set of Class 
        IF (selecttr! = null ) {selecttr.removeClass ( "selectTr" )} 
        $ ( the this) .addClass ( "SelectTr" ); 
        selecttr = $ ( the this );
        // rowIndex = this.rowIndex; 


    }) 

    $ ( . ".MyTable td") the Click ( function () { // click td td set of class 
        IF (! selecttd = null ) {$ (selecttd) .removeClass ( "selectTd" )} 
        $ ( the this ) .addClass ( "selectTd" ); 
        selecttd = the this ; 
        setColumn ( the this .cellIndex) 
        the cellIndex = the this .cellIndex; 
    }) 

    / / set vertical column styles
    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");
        })
    }
})


效果图

 

Guess you like

Origin www.cnblogs.com/yangjun806/p/12606280.html