javascript实现切换td中的值
之前面试前端时，遇到一道面试题，当时没有思绪所以没答出来，今天整理了一下和大家一起分享下：
原题是:使用对象方法创建一个2x2的表格（table），要求第二行第二列单元格中拥有一个按钮，当点击此按钮时，第一行第一列的值与第二行第一列的值互换，见下图
创建表格
点击效果
本人愚钝，如果您有更好的方法不妨告诉在下，本人琢磨了半天终于有了些结果：
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>
创建表格方法实现的效果为：
点击切换代码：
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;
}
点击切换按钮效果为：
拓展延伸：
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>
相关推荐
-
js(JavaScript)实现TAB标签切换效果的简单实例
一个可以js(JavaScript)的tab标签切换代码,可以自动适应宽度,可以自己添加删除标签块,傻瓜式操作便能完成! 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401- 19991224/loose.dtd"><HTML xmlns="http://www.w
-
原生javascript实现图片按钮切换
先给大家看下效果展示图 以下为详细代码: 复制代码 代码如下: function LGY_picSwitch(option){ this.oWrap = this.getId(option.wrapID); //最外层元素 this.olistWrap = this.getNodeByClassname(this.oWrap,'gy_picSwitch_listWrap')[0]; this.oUl = this.olistWrap.getElementsByTagNam
-
javascript实现图片自动和可控的轮播切换特效
演示图: 需要引入的文件 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/js/1/css/style.css"> <script type="text/javascript" src="http://hovertree.com/texiao/js/1/js/koala.min.1
-
原生javascript实现Tab选项卡切换功能
分析个人用原生JS获取类名元素的代码: 复制代码 代码如下: getByClassName:function(className,parent){ var elem = [], node = parent != undefined&&parent.nodeType==1?parent.getElementsByTagName('*'):document.getElementsByTagName('*'),
-
JavaScript实现点击文字切换登录窗口的方法
本文实例讲述了JavaScript实现点击文字切换登录窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款动画切换层窗口的特效,点击不同的登录用户会切换到不同的登录窗口,窗口内的内容可以是不一样的,是比较实用的一款代码. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JAVASC
-
javascript实现按回车键切换焦点
前段时间学习了 HTML 和 CSS,对这方面产生了兴趣,也开始学习了 javascript 高级编程(第三版),这些天也一直在学,刚刚学到事件和表单脚本的内容.前几天,老师让编写一段代码:是在 javascript 表单中,用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中.应用目前为止学到的知识试着编写代码,在编写的过程中遇到了几个难点:取模计算:在函数内部用 this 和 arguments 找到触发事件:使用 addHandler() 方法为事件添加事件处理程序.在老师
-
javascript实现的多个层切换效果通用函数实例
本文实例讲述了javascript实现的多个层切换效果通用函数.分享给大家供大家参考.具体实现方法如下: function ChangeDiv(tagId,tagName,divId,divName,zDivCount,tagclass,divclass) { for(i=0;i<=zDivCount;i++) { document.getElementById(divName+i).style.display="none"; document.getElementById(di
-
javascript回车完美实现tab切换功能
最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel 那样的回车换行的功能在网上找了有关这方面的问题但是都不怎么好用,也有人提供了这方面的思路如何来做, 经过本人的整理和测试,能够很好的解决这个问题: 需要的条件 1,Jquery库地址可以到jquery.com官网上去下载最新的 2,查看界面表单的结构和相对应的表单位置 以下是一些才是表单结构 复制代码 代码如下: <fieldset> <
-
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
本文实例讲述了javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1
-
javascript实现ecshop搜索框键盘上下键切换控制
在createSelect()函数中,返回一个对象,这个对象的两个方法next() 和prev()中的调用的moveSelect()能正确的指向到该函数,也可以把 moveSelect()函数放到外面来. 复制代码 代码如下: /* 键盘操作与问题推荐选择 */ var curDo = null; var select = createSelect(); $('#keywords').keyup(function(e){ var theEvent = e
-
JavaScript实现多个重叠层点击切换效果的方法
本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&