javascript实现切换td中的值


Posted in Javascript onDecember 05, 2014

之前面试前端时,遇到一道面试题,当时没有思绪所以没答出来,今天整理了一下和大家一起分享下:

原题是:使用对象方法创建一个2x2的表格(table),要求第二行第二列单元格中拥有一个按钮,当点击此按钮时,第一行第一列的值与第二行第一列的值互换,见下图

javascript实现切换td中的值

创建表格

javascript实现切换td中的值

点击效果

本人愚钝,如果您有更好的方法不妨告诉在下,本人琢磨了半天终于有了些结果:

1.创建表格的对象

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    table td{text-align: center;}

    </style>

</head>

<body>

<h2>使用对象创建表格</h2>

  <script>

  var table={

    value1:"value1",

    value2:"value2",

    row:2,

    cell:2,

    create:function(){

        //创建表格

        var table=document.createElement("table");

        table.border=1;

        table.width="500";  

        //创建按钮  

        var button=document.createElement("button"); 

        button.innerHTML="切换";

        button.name="qiehuan";

        button.setAttribute("onclick","qiehuan()");

        //创建行

        for(var i=0;i<this.row;i++){

            table.insertRow();

        }

        //创建列

        for(var i=0;i<this.cell;i++){

            table.rows[i].insertCell();

            table.rows[i].insertCell();

        } 

      //将表格添加到body

      document.body.appendChild(table);

      var table=document.getElementsByTagName("table")[0];

      var row1=table.rows[0];

      var row2=table.rows[1];

      table.rows[1].cells[1].appendChild(button);

      var a=row1.cells[0].innerHTML=this.value1;

      var b=row2.cells[0].innerHTML=this.value2;

    }

  }

  table.create();

</script>

</body>

</html>

创建表格方法实现的效果为:

javascript实现切换td中的值

点击切换代码:

function qiehuan(){

      //获取table

      var table=document.getElementsByTagName("table")[0];

    //获取tr

      var row1=table.rows[0];

      var row2=table.rows[1];

    //交换内容

    //创建新元素来存储数据

    var a=row1.cells[0].innerHTML;

    var b=row2.cells[0].innerHTML;

    row1.cells[0].innerHTML=b;

    row2.cells[0].innerHTML=a;
  }

点击切换按钮效果为:

javascript实现切换td中的值

拓展延伸:

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

javascript实现切换td中的值

原始

javascript实现切换td中的值

效果

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>
Javascript 相关文章推荐
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
May 16 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
使用Javascript简单实现图片无缝滚动
Dec 05 #Javascript
深入分析js的冒泡事件
Dec 05 #Javascript
Javascript解析URL方法详解
Dec 05 #Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 #Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 #Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 #Javascript
Javascript实现获取窗口的大小和位置代码分享
Dec 04 #Javascript
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
js多功能分页组件layPage使用方法详解
2016/05/19 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python迭代器实例简析
2014/09/25 Python
python使用marshal模块序列化实例
2014/09/25 Python
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
python爬取微信公众号文章
2018/08/31 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
详解Python yaml模块
2020/09/23 Python
资料员岗位职责
2013/11/17 职场文书
手机被没收的检讨书
2014/10/04 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
月考总结与反思
2015/10/22 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
python Tkinter的简单入门教程
2021/04/11 Python