javascript实现单击改变单元格颜色，并且获取单元格背景。

具体如下改变监控区域设置：
1、3x3表格 分别为
1   2   3
4   5   6
7   8   9
2、单击某个单元格单元格变成绿色，再次单击变成白色。
3、当点确认的时候统计颜色为绿色的单元格，并转化为（1234..）get方式发送到表单/set。

解决方案 »

  1.   

    建议用jquery给单元格加上click事件
    判断然后分别用上不同的class最后发送的时候 根据class取得这些单元格就是
      

  2.   

    jQuery注册单击事件判读表格背景色都很简单
      

  3.   


    <!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>
        <title></title>
     <style type="text/css" >
    .selectedtd{
     background-color:green;
    }
     </style>
     <script type="text/javascript" src="js/jquery-1.6.4.min.js" ></script>
    </head>
    <body>
     <table id="table1" border="1" >
     <tr><td>1</td><td>2</td><td>3</td></tr>
     <tr><td>4</td><td> 5</td><td>6</td></tr>
     <tr><td>7</td><td>8 </td><td>9</td></tr>
     </table>
     <input type="button" id="done" value="选择完毕" />
     <script type="text/javascript" >
         $("#table1 td").click(function() {
             $(this).toggleClass("selectedtd");
         });
         $("#done").click(function() {
             var s = "";
             $(".selectedtd").each(function() { s += $.trim($(this).html()); }); //alert(s);         
             $.post("saveselect.asp", {"configstring":s},function(data){
             //alert("保存成功")
             });
         });
     </script> 
    </body> 
    </html>
      

  4.   

    我ajax发送保存的，你直接本页提交也是可以的
      

  5.   

    in js, you can add click event too.
      

  6.   

    成功了~
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> New Document </title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
    <script type="text/javascript">
    <!--
    var cgreen = '#00ff00';
    var cwhite = '#ffffff';
    //给td添加单击事件
    function loadtable(){
    var tds = document.getElementsByTagName('td');
    for(var i = 0 ; i < tds.length ; i ++){
    tds[i].bgColor=cwhite;
    tds[i].onclick=function(){
    this.bgColor=this.bgColor===cgreen?cwhite:cgreen;
    }
    }
    } //统计哪个是变了色的
    function total(){
    var tds = document.getElementsByTagName('td');
    var totalstr = '';
    for(var i = 0 ; i < tds.length ; i ++){
    if(tds[i].bgColor===cgreen){
    totalstr += i+1;
    }
    }
    //统计的颜色给隐藏的输入框
    document.getElementById('tdstr').value=totalstr;
    alert(totalstr);
    //提交？
    }
    //-->
    </script>
     <body onload="loadtable()">
     <form action="http://192.168.235.143:8080/0/config/set" onsubmit="total()" method="get" target=view_window>
     <input type="hidden" value="" id="tdstr" name="area_detect"/>
      <table border="1px;" width="800px;">
        <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    </tr>
     <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    </tr>
      <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    </tr>
    <input type="submit" value="Set" />

    </form>
      </table>
     </body>
    </html> 
      

  7.   

    楼主，我的不行？你不会没有下载 jquery.js 吧