问个关于表格的问题

现在想做个  表格  下底和左边  作为X Y 轴，   然后当选中某个或者某几个单元格后 ，
选中的单元格背景色改变。并且能够够获取到选种单元格所代表的数据！
实现这个用什么好呢？ 有什么源码资料更好拉！

解决方案 »

  1.   

    可以根据鼠标移动的区域来判断.
    用 onmousekeydown, onmousekeyup 方法来判断位置.
      

  2.   

    不知道怎么把图片放过来
    我把图片 放到我在CSDN的相册了  thanks!
      

  3.   

    http://album.hi.csdn.net/views/photo/260236
      

  4.   

    可以添加个单击事件吧。addMouseListener。。
      

  5.   

    这个可以用Javascript来实现，给你写了个简单的例子
    <!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=gb2312" />
    <title>无标题文档</title>
    <script language="javascript">
    function test(){
    var td=document.getElementById("row"+arguments[0]+"col"+arguments[1]);
    if(td.className=="unselected"||td.className==""){
    td.className="selected";
    } else {
    td.className="unselected";
    }
    }
    function show(){
       for(var i=0;i<3;i++){
          for (var j=0;j<3;j++){
       var td=document.getElementById("row"+i+"col"+j);
    if (td.className=="selected"){
    alert(td.innerText);
    }
      }
       }
    }
     </script>
    <style>
    .selected {
    background-color: #006600;
    }
    .unselected {
    background-color: #ffffff;
    }
    </style>
    <link href="test" rel="stylesheet" type="text/css" />
    </head><body>
    <table width="200" border="1">
      <tr id="row1">
        <td id="row0col0" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row0col0</td>
        <td id="row0col1" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row0col1</td>
        <td id="row0col2" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row0col2</td>
      </tr>
      <tr id="row2">
        <td id="row1col0" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row1col0</td>
        <td id="row1col1" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row1col1</td>
        <td id="row1col2" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row1col2</td>
      </tr>
      <tr id="row3">
        <td id="row2col0" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row2col0</td>
        <td id="row2col1" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row2col1</td>
        <td id="row2col2" onclick="test(this.parentElement.rowIndex,this.cellIndex);">row2col2</td>
      </tr>
    </table>
    <input type="button" value="显示" onclick="show();"/>
    </body>
    </html>
      

  6.   

    呵呵，这种问题拿js框架做吧，很方便的，给你一个jquery的例子：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <META NAME="Generator" CONTENT="EditPlus">
      <META NAME="Author" CONTENT="">
      <META NAME="Keywords" CONTENT="">
      <META NAME="Description" CONTENT="">
      <style type="text/css">
    .selected{background-color:red}
      </style>
      <script src="jquery-1.2.3.min.js"></script>
      <script>
    $(function() {
    $("td").toggle(function(){
    $(this).addClass("selected");
    },function() {
    $(this).removeClass("selected");
    });
    }); function getData() {
    var str = "";
    $("td.selected").each(function() {
    str += $(this).text()+"\n";
    });
    alert(str);
    }
      </script>
     </HEAD> <BODY>
    <table width="200" border="1">
      <tr id="row1">
    <td id="row0col0" >row0col0</td>
    <td id="row0col1" >row0col1</td>
    <td id="row0col2" >row0col2</td>
      </tr>
      <tr id="row2">
    <td id="row1col0" >row1col0</td>
    <td id="row1col1" >row1col1</td>
    <td id="row1col2" >row1col2</td>
      </tr>
      <tr id="row3">
    <td id="row2col0" >row2col0</td>
    <td id="row2col1" >row2col1</td>
    <td id="row2col2" >row2col2</td>
      </tr>
    </table>
    <input type="button" onclick="getData()" value="得到数据。"/>
     </BODY>
    </HTML>