黑马程序员技术交流社区

标题: 在HTML中，多个TR的ID相同，该TR绑定了onclick="detailNode();" 事... [打印本页]
作者: 十万一千    时间: 2014-7-29 20:13
标题: 在HTML中，多个TR的ID相同，该TR绑定了onclick="detailNode();" 事...

HTML： <tr id="test_wf" class="tableEvenRow"  onclick="detailNode();">
        <td width="3%" class="bottomTab"><input name='mgmnt_flg_check_box2' type='checkbox'/></td>
        <td width="4%" class="bottomTab"><input name='snmp_flg_check_box2' type='checkbox'/></td>
        <td width="10%"  class="bottomTab">127.0.0.1</td>
        <td width="7%"   class="bottomTab">aa</td>
        <td width="10%"  class="bottomTab">bb</td>
</tr>
<tr id="test_wf" class="tableEvenRow"  onclick="detailNode();">
        <td width="3%" class="bottomTab"><input name='mgmnt_flg_check_box2' type='checkbox'/></td>
        <td width="4%" class="bottomTab"><input name='snmp_flg_check_box2' type='checkbox'/></td>
        <td width="10%"  class="bottomTab">127.0.0.2</td>
        <td width="7%"   class="bottomTab">cc</td>
        <td width="10%"  class="bottomTab">dd</td>
</tr>
JS：
function detailNode() {                       
window.open ('mgmnt_node_detail.html?      IFIPAddress="11.11.11.11"','newwindow','height=800,width=1280,left=50,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no');        }

在HTML中，多个TR的ID相同，该TR绑定了onclick="detailNode();" 事件，问：如何拿到当前点击的第三个TD的文本？
TR TD 的class，id，JS方法名定义不能修改！
作者: yqj    时间: 2014-7-29 23:23
学习学习，js的Dom快忘光了，不过楼主如果有jquery的方法操作可能会简单很多
作者: chen010yu    时间: 2014-7-30 01:30
路过进来看看
作者: yqj    时间: 2014-7-30 14:03
在onclick="detailNode();"事件中的detailNode()方法中添加“this”参数，onclick="detailNode(this);
js：
                <script  type="text/javascript">
                function detailNode(tr){
                        var tdNodes=tr.getElementsByTagName("td");
                        var text=tdNodes[2].innerHTML;
                        alert(text);
                }
        </script>
说明：detailNode(tr),"tr"是传入的当前点击的“TR”节点，即onclick="detailNode(this);中的“this”， var tdNodes = tr.getElementsByTagName("td")；方法获取当前“tr”节点下的所有“td”节点。
具体代码如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">

  4. <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
  5.         <head>
  6.                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.                 <title>new_file</title>
  8.                 <meta name="author" content="Administrator" />
  9.                 <!-- Date: 2014-07-30 -->
  10.         </head>
  11.         <body>
  12.                 <table>
  13.                 <tr id="test_wf" class="tableEvenRow"  onclick="detailNode(this);">
  14.                         <td width="3%" class="bottomTab">
  15.                                 <input name='mgmnt_flg_check_box2' type='checkbox'/>
  16.                         </td>
  17.                         <td width="4%" class="bottomTab">
  18.                                 <input name='snmp_flg_check_box2' type='checkbox'/>
  19.                         </td>
  20.                         <td width="10%"  class="bottomTab">127.0.0.1</td>
  21.                         <td width="7%"   class="bottomTab">aa</td>
  22.                         <td width="10%"  class="bottomTab">bb</td>
  23.                 </tr>
  24.                 <tr id="test_wf2" class="tableEvenRow"  onclick="detailNode(this);">
  25.                         <td width="3%" class="bottomTab">
  26.                                 <input name='mgmnt_flg_check_box2' type='checkbox'/>
  27.                         </td>
  28.                         <td width="4%" class="bottomTab">
  29.                                 <input name='snmp_flg_check_box2' type='checkbox'/>
  30.                         </td>
  31.                         <td width="10%"  class="bottomTab">127.0.0.2</td>
  32.                         <td width="7%"   class="bottomTab">cc</td>
  33.                         <td width="10%"  class="bottomTab">dd</td>
  34.                 </tr>
  35.                 </table>
  36.         </body>
  37.         <script  type="text/javascript">
  38.                 function detailNode(tr){
  39.                         var tdNodes=tr.getElementsByTagName("td");
  40.                         var text=tdNodes[2].innerHTML;
  41.                         alert(text);
  42.                 }
  43.         </script>
  44. </html>
复制代码
希望对lz有用。
作者: 十万一千    时间: 2014-7-30 14:18
yqj 发表于 2014-7-30 14:03
在onclick="detailNode();"事件中的detailNode()方法中添加“this”参数，onclick="detailNode(this);
js： ...

谢谢！  html画面的代码都是既存的，不太方便改动，所以 你给出的添加this参数 我这边也不太方便用。  不过还是谢谢的回复



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2