tabel对tr 增删

//添加
        $("#chgRate_detailsTimeAdd").bind("click", function (event) {
            me.addRows();//最后一行后面添加行
            me.initMouseTouch();//新行鼠标选中事件
        });
 //选中
        $("#detailsTimeInfTbody").bind("click",function(event){
            var tr=null;
            var evt = event || window.event;
            var src = evt.target || evt.srcElement;
             tr=src.parentNode;//获取选中的节点
            if(tr.nodeName=="TD"){
                tr=src.parentNode.parentNode;//节点是否是tr 不是选中父节点
            }
            var trIndex=tr.rowIndex;//获取行ID
            me["trIndex"]=trIndex;//推送到外部变量
        });
        //删除
        $("#chgRate_detailsTimeRemove").bind("click",function(e){//删除选中的行
            var table = document.getElementById("detailsTimeInf");
            if(me.trIndex>0){
                table.rows[me.trIndex].remove();
            }
        });
        //保存
        $("#chgRate_detailsTimeSave").bind("click",function(e){ //保存信息
            me.initGetInf();//往数据库塞数据
        });
    addRows: function (a,b,c) {
        $("#detailsTimeInfTbody").append(
            " <tr  >" +
            "<td  value='' >" +
            "<select id='"+a+"'>" +
            "<option value='1' name='尖峰'>尖峰</option>" +
            "<option value='2' name='峰'>峰</option>" +
            "<option value='3' name='平'>平</option>" +
            "<option value='4' name='谷'>谷</option>" +
            "</select >" +
            "</td>" +
            "<td>" +
            "<select id='"+b+"'>" +
            "<option value='00' name='00'>00</option>" +
            "<option value='01' name='01'>01</option>" +
            "</select >" +
            "<span>时：</span>"+
            "<select id='"+c+"'>" +
            "<option value='00' name='00'>00</option>" +
            "<option value='50' name='05'>05</option>" +
            "<option value='10' name='10'>10</option>" +
            "</select >" +
            "<span>分</span>"+
            "</td>" +
            "</tr>"
        );
    },

initMouseTouch:function (){
        //鼠标移动到行变色,点击选中行变色
        $("tbody tr").hover(
            function () { $(this).addClass("hover") },
            function () {
                $(this).removeClass("hover")
            })
        $('tbody tr').click(function(){
            $('table tr').removeClass('on');
            $(this).addClass('on');
        });
    },

 

 

 

 

//CSS

     .hover
    {
        background-color: rgb( 240, 240, 240 );
        cursor: pointer;
    }
   .active{
        background-color: rgb( 112, 176, 253 );
    }
    .on
    {
        background-color:#e9e9e9;
    }

转载于:https://www.cnblogs.com/xiaomurunning/p/5555216.html