操作table中TD元素的子元素

来源：互联网发布：勇士vs雷霆西决数据编辑：程序博客网时间：2024/05/22 08:20

最近，公司里有个项目中要求实现一个功能：前台页面上将后台action中传过来的list型对象数据展示在一个table中，同时，对对象内的电话号码字段要做出判断：如果电话号码的字段值不为空，则在电话号码旁边要出现一个小图标，点击图标可以链接到其他页面，并把电话号码的值传过去。

首先，展示list中的对象数据在一个table中，这个要求比较简单，直接用 struts2 的 iterator 标签迭代就可以了，以下是相关的代码：

       <td>${sts.index+1}</td>
       <td title="<s:property value="clientName"></s:property>">
        <s:property value="clientName"></s:property></td>
       <td title="<s:property value="clientStation"></s:property>"><s:property value="clientStation"></s:property></td>

       <td title="<s:property value="clientFirstCall"></s:property>"><s:property value="clientFirstCall"></s:property>
           <img style="display:inline-block" src="${requestScope.resourceI18n }/images/zujie.gif" onclick="telphone(nextSibling.nextSibling.value)" / >
        <input type="hidden" id="firstPhone" value="<s:property value='clientFirstCall'/>" >
        <input id="comMobile" name="comMobile" type="hidden" value="${sessionScope.comMobile}" />

       </td>

       <td title="<s:property value="clientSecondCall"></s:property>"><s:property value="clientSecondCall"></s:property>
         <img style="display:inline-block" src="${requestScope.resourceI18n }/images/zujie.gif" onclick="telphone(nextSibling.nextSibling.value)" / >
        <input type="hidden" id="secondPhone" value="<s:property value='clientSecondCall'/>" >
       </td>

       <td title="<s:property value="clientThirdCall"></s:property>"><s:property value="clientThirdCall"></s:property>
           <img style="display:inline-block" src="${requestScope.resourceI18n }/images/zujie.gif" onclick="telphone(nextSibling.nextSibling.value)" / >
        <input type="hidden" id="thirdPhone" value="<s:property value='clientThirdCall'/>" >
       </td>

       <td title="<s:property value="clientEmail"></s:property>"><s:property value="clientEmail"></s:property></td>
       <td title="<s:property value="clientFax"></s:property>"><s:property value="clientFax"></s:property></td>
       <td><s:property value="user.truename"></s:property></td>

</tr>
</tbody>
</table>

然后，实现点击图标跳转功能，注意上面的 onclick="telphone(nextSibling.nextSibling.value)" 这段代码，这是我给img标签添加的onclick事件；用户单击图标后，将会调用js中的telphone 函数，同时会把电话号码值做过参数传递进去：nextSibling.nextSibling.value 就是说获取img标签的下一个相邻元素的value，这里既是指 input标签中的 value值。

最后，实现根据电话号码的有无展示图标按钮，这里我写了一个页面加载事件的js,代码如下：

  //页面加载的时候，如果有手机号，则在手机号旁边显示电话图标，没有则不显示
window.onload=function(){
var tab = document.getElementById("tab_client");
for(var i = 1;i < tab.rows.length;i++){
  var td_1 = tab.rows[i].cells[3];
  var td_2 = tab.rows[i].cells[4];
  var td_3 = tab.rows[i].cells[5];
  var labels_1 = td_1.childNodes;
  var labels_2 = td_2.childNodes;
  var labels_3 = td_3.childNodes;

  if(td_1.innerText.replace(/^\s+|\s+$/g,"") == ""){
   labels_1[0].style.display="none";
  }

  if(td_2.innerText.replace(/^\s+|\s+$/g,"") == "" ){

   labels_2[0].style.display="none";
  }
  if(td_3.innerText.replace(/^\s+|\s+$/g,；"") == ""){
   labels_3[0].style.display="none";
  }

}

}

这段代码的基本思想是：先遍历table中的tr元素，获取每个tr中的3 4 5 位置上的td元素，然后获取这三个td元素的子元素（主要用于获取img元素，如果有电话号码，则子元素中下标为1的为img元素;如果没有，则下标为0的为img元素），td_1.innerText 这句代码用于获取电话号码的值，后面添加的replace正则是为了去除空格（这里很重要，一定要有这个正则，否则可能永远进不来if判断，我之前就是因为这儿浪费了很长时间）；如果if条件成立，即电话号码为空，则将img按钮隐藏。

这样，所有的功能就基本实现了。