table表格tr隔行换色，点击改变背景色，选中tr删除行

最新推荐文章于 2023-08-18 15:52:21 发布

NESUX0524

最新推荐文章于 2023-08-18 15:52:21 发布

阅读量984

点赞数

分类专栏： JS

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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>

NESUX0524

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
table表格tr隔行换色，点击改变背景色，选中tr删除行

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;me
复制链接

扫一扫