yangzailu

导航

利用节点更改table内容

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="author" content="" />
  <link rel="stylesheet" type="text/css" href="" />
  <style type="text/css"></style>
  <script type="text/javascript"></script>
 </head>
 <body><table width="500" border="1"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>奥特曼</td><td></td><td>26</td></tr></table>
  <input type="button" value="查找table节点" onclick="find_table_node()">
  <input type="button" value="修改男为女" onclick="edit_text_node()">

  <script type="text/javascript">
        function find_table_node(){
            //查找html节点
            var node_html=document.firstChild;
            //alert(node_html.nodeName); //结果是对象
            //查找body节点
            var node_body=node_html.lastChild;
            //alert(node_body);
            var node_table=node_body.firstChild;
               alert(node_table.nodeName);
        }

        function edit_text_node(){
                //查找body节点
                var node_body=document.body;
                //查找table节点
                var node_body=document.body.firstChild;
                //查找tbody节点
                var node_tbody=node_body.firstChild;
                //查找tr节点
                var node_tr=node_tbody.lastChild;
                //查找td节点 是数组
                //childNodes返回的是一个数组,根据下标找td节点
                var node_td = node_tr.childNodes[1];
                //alert(node_td.nodeName);
                //查找文本节点
                var node_text=node_td.firstChild;
                //修改内容为女
                node_text.nodeValue="";
                //alert (node_text.nodeValue);

        }
  </script>





 </body>
</html>

 

posted on 2016-11-22 15:02  飞离地平线  阅读(240)  评论(0编辑  收藏  举报