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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
JavaScript跨平台的开源框架NativeScript
Mar 24 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
node.js平台下利用cookie实现记住密码登陆(Express+Ejs+Mysql)
Apr 26 Javascript
详解JS实现系统登录页的登录和验证
Apr 29 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
json_decode 索引为数字时自动排序问题解决方法
Mar 28 Javascript
使用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+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
php 表单验证实现代码
2009/03/10 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php实现excel中rank函数功能的方法
2015/01/20 PHP
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jquery indexOf使用方法
2013/08/19 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
常用的js方法合集
2017/03/10 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
Django forms组件的使用教程
2018/10/08 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
购买正版游戏和游戏激活码:Green Man Gaming
2019/11/06 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
营业员个人总结的自我评价
2013/10/25 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
应用英语专业自荐信
2014/01/26 职场文书
离婚协议书标准格式
2014/10/04 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
干部作风建设工作总结
2014/10/29 职场文书
试用期辞职信范文
2015/03/02 职场文书
计划生育工作总结2015
2015/04/03 职场文书
公司会议开幕词
2016/03/03 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
SpringBoot生成License的实现示例
2021/06/16 Java/Android
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js