js动态修改表中的数据

比如我的一个网页table中有3行3列的数据(不是数据库的表,是网页显示出来的表).我想点一个按钮改变某一行某一列的文字(无刷新,要求用js)比如第二行第二列的文字为:未完成
我想点个按钮显示为:已完成请问怎么做?

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>test</title> 
    <script language="javascript" type="text/javascript">    function gd(o)
        {
            o.parentNode.previousSibling.innerHTML = "归档中...";
        }
        
    </script> <style type="text/css">
    #tbl tr td{
        border:solid 1px gray;
    }
    </style></head> 
    <body><table id="tbl">
        <tr>
            <td>ssssss</td>
            <td>未归档</td>
            <td><input type="button" value="归档" onclick="gd(this);" /></td>
        </tr>
    </table></body> 
    </html>
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>test</title> 
    <script language="javascript" type="text/javascript">    function gd(o)
        {
            o.parentNode.previousSibling.innerHTML = "归档中...";
            o.style.display="none";
        }
        
    </script> <style type="text/css">
    #tbl tr td{
        border:solid 1px gray;
    }
    </style></head> 
    <body><table id="tbl">
        <tr>
            <td>ssssss</td>
            <td>未归档</td>
            <td><input type="button" value="归档" onclick="gd(this);" /></td>
        </tr>
    </table></body> 
    </html>
      

  3.   

    上面的代码不兼容firefox，修改如下:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>test</title> 
    <script language="javascript" type="text/javascript">    function gd(o)
        {
            var td = o.parentNode;
            do{
                td=td.previousSibling;
            }
            while (td.nodeType != 1)
            td.innerHTML = "归档中...";
            o.style.display="none";
        }
        
    </script> <style type="text/css">
    #tbl tr td{
        border:solid 1px gray;
    }
    </style></head> 
    <body><table id="tbl">
        <tr>
            <td>ssssss</td>
            <td>未归档</td>
            <td><input type="button" value="归档" onclick="gd(this);" /></td>
        </tr>
    </table></body> 
    </html>
      

  4.   

    楼上已经很详细了，测试通过！
    不过个人建议楼主不要把按钮隐藏，改成disabled貌似更好
    只需要将楼上代码中
    o.style.display="none";
    改为
    o.disabled=true;
    即可