<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><title>jquery隔行换色,点击变色,点击选中删除</title><script language=javascript src="jquery.min.js"></script><style>/* .dataTable { border-top: 1px solid #009286; border-right: 1px solid #009286; border-bottom: 1px solid #009286;}.dataTable tbody tr td{text-align:left; margin:0px; padding:8px; white-space:nowrap;}.dataTable .null{margin:0px; padding:0px;}.dataTable tbody tr{line-height: 120%;} */.dataTable .even{ background:#FFFFFF;} /* 偶数行样式 E1F4EE*/.dataTable .odd{ background:#E1F4EE;} /* 奇数行样式 E1F4EE*/.dataTable .over{background:#CCCC99;} /* 鼠标掠过行样式 CCCC99*/.dataTable .selected{ background:#6F4DFF;color:#ffffff;} /* 选中行样式 BFDFFF*/</style><SCRIPT LANGUAGE="JavaScript"> (function ($) { $.fn.extend({ "alterBgColor": function (options) { var prevselitem = null; //设置默认值 options = $.extend({ style: "4", odd: "odd", /* 偶数行样式*/ even: "even", /* 奇数行样式*/ over: "over", /* 鼠标掠过*/ selected: "selected" /* 选中行样式*/ }, options); //交替背景 $("tbody>tr:odd", this).addClass(options.odd); $("tbody>tr:even", this).addClass(options.even); //鼠标移动背景 $("tbody>tr", this).hover(function () { $(this).addClass(options.over); }, function () { $(this).removeClass(options.over); }); //样式4 if (options.style == "4") { //其他列 为单选 $('tbody>tr td:not(:first-child)', this).click(function () { var p = $(this).parents("tr"); p.addClass(options.selected).siblings().removeClass(options.selected); $("#tid").val($(this).parents("tr").children("td").eq(0).html()); //alert($(this).parents("tr").children("td").eq(0).text()); // /.find(':checkbox:first').attr('checked', false); //p.find(':checkbox:first').attr('checked', true); }); } return this; //返回this，使方法可链。 } }); })(jQuery); $(document).ready(function () { $(".dataTable").alterBgColor({ style: "4" }); //可以链式操作 }); function delrow(){ //alert($("#tid").val()); $('tbody>tr').each(function(){ var vv=$(this).children('td').eq(0).text(); if(vv==$("#tid").val()){ $(this).remove(); } }); } </SCRIPT></head> <body><input type="hidden" id="tid" ><!-- demo1 --><h1>Demo1.</h1><button id="delrowbtn" onclick="delrow()" >Del Row</button><table class="dataTable"><thead><tr> <th>Name</th> <th>Id</th> <th>Address</th></tr></thead><tbody><tr> <td>T1234</td> <td>24455</td> <td>shenzhen</td></tr><tr> <td>T1234</td> <td>45595</td> <td>guangzhou</td></tr><tr> <td>R3444</td> <td>2323</td> <td>shenzhen</td></tr><tr> <td>E2244</td> <td>44858</td> <td>dongguan</td></tr><tr> <td>RF45</td> <td>76123</td> <td>huizhou</td> </tr><tr> <td>Righ</td> <td>23112</td> <td>hangzhou</td></tr><tr> <td>fo33</td> <td>2333</td> <td>beijing</td></tr></tbody></table></body></html>