<html>
<head>
<title>jQuery表格修饰:隔行换色,点击变色,多选单选变色丨芯晴网页特效丨CsrCode.Cn</title>
<script language="JavaScript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$(document).ready(function(){
 $('.cssraindemo3 tbody tr:even').addClass('SelectColor');
 $('.cssraindemo3 tbody tr').hover(
  function() {$(this).addClass('highlight');},
  function() {$(this).removeClass('highlight');}
 ); 
 // 单选框
 $('.cssraindemo3 tbody tr').click(
  function() {
  $(this).siblings().removeClass('selected');
  $(this).addClass('selected'); 
  }
 );
 
 //选中哪一行
$('.cssraindemo3 tr').click(function() {$(this).find('td').each(function(i) {
if (i == 0) {text = $(this).text();
alert(text);
}});
 
if (!this.dellEmpoyeessbutton) 
{
this.dellEmpoyeessbutton = 'dellEmpoyeessbutton';
$("#employeesSubmit_Dell").click(function(){if(text != "")
{
alert("死循环?");
alert(text);
}
});
}}); //结束
});
 
//-->
</SCRIPT>
<style type="text/css">
tr.SelectColor { background:#FFF3BF;}
tr.highlight { background:#6F4DFF;}
tr.selected { background:#aaaaaa;color:#fff;}td { font:normal 12px/17px Arial;padding:2px;width:100px;}
th { font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;}
table { border:0;border-collapse:collapse;}
</style>
</head>
<body> 
<table class="cssraindemo3" id="tableID">
<thead>
<tr>
 <th> </th>
<th>姓名</th>
 <th>性别</th>
 <th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
 <td>1</td>
  <td>张山</td>
 <td>男</td>
 <td>浙江宁波</td>
</tr>
<tr>
 <td>2</td>
  <td>李四</td>
 <td>女</td>
 <td>浙江杭州</td>
</tr>
<tr>
 <td>3</td>
  <td>王五</td>
 <td>男</td>
 <td>湖南长沙</td>
</tr>
<tr>
 <td>4</td>
  <td>找六</td>
 <td>男</td>
 <td>浙江温州</td> 
</tr>
<tr>
<td>5</td>
  <td>Rain</td>
 <td>男</td>
 <td>浙江杭州</td>
</tr>
<tr>
 <td>6</td>
 <td>MAXMAN</td>
 <td>女</td>
 <td>浙江杭州</td>
</tr>
</tbody>
</table>
<div style="float: right;">
<input name="按钮" type="button" id="employeesSubmit_Dell" value="删 除" style="width:100%; height:40px; font-size:18px; font-style:inherit" />
</div>
</body>
</html>上面是原代码,求能帮我解决问题的,当我点多几天记录的时候点删除应该只显示一条选中记录为什么会出现那么多,如何解决多选问题。我要是的是单选

解决方案 »

  1.   

    方法1:使用全局变量,记录最后一次点击的行索引
    var del_TrIndex;
    $("#tableID tbody").find("tr").each(function(){
            $(this).bind("click",function(){
                    del_TrIndex = $("#tableID tbody").find("tr").index($(this));
            })
    })
    $("#employeesSubmit_Dell").bind("click",function(){ 
     $("#tableID tbody").find("tr").eq(del_TrIndex).remove();
    })
    方法2:使用class 样式标记
    $("#tableID tbody").find("tr").each(function(){
            $(this).bind("click",function(){
                    $(this).addClass("delMark");
                    $(this).siblings().remove("delMark"); 
            });
    });
    $("#employeesSubmit_Dell").bind("click",function(){ 
     $(".delMark").remove();
    })
      

  2.   

    $("#employeesSubmit_Dell").click(function(){
      if(text != "")
      {
        alert("死循环?");
        alert(text);
      }
    });
    把这段代码写在 //结束 之前即可。
      

  3.   

    你把这个删除的单击事件写在了选择行的里面了,所以选择几次就会提示几次alert。
    $(document).ready(function(){
      $('.cssraindemo3 tbody tr:even').addClass('SelectColor');
      $('.cssraindemo3 tbody tr').hover(
       function() {$(this).addClass('highlight');},
       function() {$(this).removeClass('highlight');}
      ); 
     // 单选框
      $('.cssraindemo3 tbody tr').click(
       function() {
       $(this).siblings().removeClass('selected');
       $(this).addClass('selected'); 
       }
      );
     
     //选中哪一行
    $('.cssraindemo3 tr').click(function() {
    $(this).find('td').each(function(i) {
    if (i == 0) {
    text = $(this).text();
    alert(text);
    }
    }); 
    if (!this.dellEmpoyeessbutton) 
    {
    this.dellEmpoyeessbutton = 'dellEmpoyeessbutton';
    }
    });  $("#employeesSubmit_Dell").click(function(){
    if(text != ""){
    alert(text);
    }
    });
    //结束
    });
      

  4.   

    其实是很简单的问题,设置一个全局变量text,然后把删除的代码移出$('.cssraindemo3 tr').click()事件。代码如下:
    <script language="JavaScript" type="text/javascript">
            $(document).ready(function() {
                $('.cssraindemo3 tbody tr:even').addClass('SelectColor');
                $('.cssraindemo3 tbody tr').hover(
      function() { $(this).addClass('highlight'); },
      function() { $(this).removeClass('highlight'); }
     );
                // 单选框
                $('.cssraindemo3 tbody tr').click(
      function() {
          $(this).siblings().removeClass('selected');
          $(this).addClass('selected');
      }
     );
                var text;            //选中哪一行
                $('.cssraindemo3 tr').click(function() {                $(this).find('td').each(function(i) {
                        if (i == 0) {                        text = $(this).text();
                            alert(text);
                        }                });            });            //结束            if (!this.dellEmpoyeessbutton) {
                    this.dellEmpoyeessbutton = 'dellEmpoyeessbutton';
                    $("#employeesSubmit_Dell").click(function() {                    if (text != "") {
                            alert("死循环?");
                            alert(text);
                        }
                    });
                }
            });
        </script>
      

  5.   

    其实是很简单的问题,设置一个全局变量text,然后把删除的代码移出$('.cssraindemo3 tr').click()事件。代码如下:
    <script language="JavaScript" type="text/javascript">
            $(document).ready(function() {
                $('.cssraindemo3 tbody tr:even').addClass('SelectColor');
                $('.cssraindemo3 tbody tr').hover(
      function() { $(this).addClass('highlight'); },
      function() { $(this).removeClass('highlight'); }
     );
                // 单选框
                $('.cssraindemo3 tbody tr').click(
      function() {
          $(this).siblings().removeClass('selected');
          $(this).addClass('selected');
      }
     );
                var text;            //选中哪一行
                $('.cssraindemo3 tr').click(function() {                $(this).find('td').each(function(i) {
                        if (i == 0) {                        text = $(this).text();
                            alert(text);
                        }                });            });            //结束            if (!this.dellEmpoyeessbutton) {
                    this.dellEmpoyeessbutton = 'dellEmpoyeessbutton';
                    $("#employeesSubmit_Dell").click(function() {                    if (text != "") {
                            alert("死循环?");
                            alert(text);
                        }
                    });
                }
            });
        </script>