多语言展示
当前在线:903今日阅读:47今日分享:26

点击增加或者删除操作表格行(jquery)

点击增加或者删除操作表格行,并且表格行按照奇偶行进行颜色变化
工具/原料

制作过程中相应的软件

步骤/方法
2

详细操作步骤:部分html代码:

                               

指标所属评价问题

      评价问题
1:
2:
                                       

问题对应评价选项

      评价问题选项分值
1:
2:
Css:.rightB .adConB .listTbb01 tr td,.rightB .adConB .listTbb02 tr td{ padding-left:8px; text-align:left; } .tj{ position:relative;} .h{ height:49px; line-height:49px; color:#333333;} .j{ color:#333;} .textareaB{ width:492px; border:1px solid #d4d4d4; margin:20px 0 20px 53px; text-align:left; height:100px; display:inline-block; font-size:12px;} .uminB{ width:14px; height:14px; background:url(../images/uminB.gif) no-repeat; display:inline-block; position:absolute; left:555px; top:20px;} .uaddB{ display:inline-block; width:14px; height:14px; background:url(../images/uaddB.gif) no-repeat; position:absolute;left:555px; top:75px;} .listTbb02{ background:#fff;} .rightB .adConB .listTbb02 .borderUp{ border-right:1px solid #e4e4e4; width:81px; text-align:center; } .rightB .adConB .listTbb02 .textAli{ text-align:center;} .rightB .adConB .listTbb02 .w { width:50%; text-align:center;} .rightB .adConB .listTbb02 .w0{text-align:center;} .unBb{width:14px; height:14px; background:url(../images/uminB.gif) no-repeat; display:inline-block; margin:0 15px 0 0px; } .unBb0{ display:inline-block; width:14px; height:14px; background:url(../images/uaddB.gif) no-repeat;} .wid00{ width:190px; height:24px; border:1px solid #e4e4e4;} .saveButT1{ height:31px; text-align:right; width:100%; margin:35px 0 13px 0; } .saveBt1{ display:inline-block; margin-right:11px; text-align:center; line-height:31px; width:80px; height:31px; background:url(../images/1saveBt.gif) no-repeat; color:#000;border:none; cursor:pointer;} .saveBt1:hover{ text-decoration:none;} .h2Col{ color:#000; margin-left:8px;} .h2Col b{ color:#268abe; font-family:Arial, Helvetica, sans-serif;} .adConTtd01 input{ display:inline-block; width:80px; height:23px; margin:2px 7px 0 0; float:right; border:none;} .adConTtd01 .addB1{ background:url(../images/1addB.gif) no-repeat;} .adConTtd01 .answB1{ background:url(../images/1AnswB.gif) no-repeat;} .adConTtd01 .copyB1{ background:url(../images/1addB.gif) no-repeat;} .listTab03 .tdr td{ border-right:1px solid #e7e7e7;} .listTab03 .tdr1{ background:#fff;} .listTab03 .tdr1 td{border-right:1px solid #e7e7e7;} .listTab03 tr td a{ color:#F00}/**/ .listTab03 tr td a:hover{ text-decoration:none;}/**/ .tdFam{ font-family:Arial, Helvetica, sans-serif;} .tdFam b{ color:#F00; font-weight:normal;} .smalIn{ width:45px; height:24px; border:1px solid #bfbebe; text-align:center; line-height:24px;} /**/.listTab03 tr td, .listTbb02 tr td{ height:30px; border-bottom:1px solid #d8d9d9; border-right:1px solid #d8d9d9;}js://点击增加或者删除操作表格行 $(function(){ $('table.listTbb02 tr:even').css('background','#f6f6f6');//按奇偶行变化行的背景颜色  $('a.addLine').click(function(){  $('#tab1 tr:even').css('background','#f6f6f6'); var cur = $('#tab1 tr').size()-1; $('#tab1').append($(''+cur+':'+''));  }); $('a.delLine').click(function(){ if($('#tab1 tr').size()>3){ $('#tab1 tr:last-child').remove();} }); $('a.addLine1').click(function(){   $('#tab2 tr:even').css('background','#f6f6f6');  var cur = $('#tab2 tr').size()-1;  $('#tab2').append($(''+cur+':'+'')); }); $('a.delLine1').click(function(){ if($('#tab2 tr').size()>3){ $('#tab2 tr:last-child').remove();} }); })

3

最终效果图:

注意事项

因个人需要,可随意改动,注意三咱代码配合着改,不然会出错哦

推荐信息