javascript实现切换td中的值(2)-木庄网络博客

当前第2页返回上一页

}

点击切换按钮效果为：

拓展延伸：

1.我想实现点击id/name/sex来更换排序：

原始

效果

code：

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
    <table border="1" width="500">
    <th colspan="3">点击替换内容</th>
    <tr>
      <td id="id">id</td>
      <td id="name">name</td>
      <td><span id="sex">sex</span></td>
    </tr>
    <tr>
      <td>1</td>
      <td>a</td>
      <td>男</td>
    </tr>
    <tr>
      <td>2</td>
      <td>b</td>
      <td>女</td>
    </tr>
</table>
<script>
    //绑定效果---ie下失效
    document.getElementById('id').addEventListener('click', f_switch, false);
    document.getElementById('name').addEventListener('click', f_switch, false);
    document.getElementById('sex').addEventListener('click', f_switch, false);
    function f_switch(){
      //获取table
      var table=document.getElementsByTagName("table")[0];
      //获取行元素
      var row1=table.rows[2];
      var row2=table.rows[3];
      //方法一
      //创建新元素来存储数据
      var newrow=document.createElement("tr");
      var newhtml=newrow.innerHTML=row2.innerHTML;
      var newrow2=document.createElement("tr");
      var newhtml2=newrow2.innerHTML=row1.innerHTML;
      //替换
      row1.innerHTML=newhtml;
      row2.innerHTML=newhtml2;
     //方法二
     //不明白....下面一句就能实现
     //table.appendChild(row1);
    }
</script>
<br>
</body>
</html>

更多ECSHOP内容来自木庄网络博客

标签：ECSHOP

返回前面的内容

javascript实现切换td中的值

相关推荐

评论