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>
-
本文向大家介绍javascript实现列表切换效果，包括了javascript实现列表切换效果的使用技巧和注意事项，需要的朋友参考一下 IE兼容性没处理，确切的说不太会，还望指点一二 思路： 1、js获取要给定点击事件的按钮组对象，如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i; 2、匹配index为将要显示的DOM对象 3、
-
本文向大家介绍基于javascript实现图片切换效果，包括了基于javascript实现图片切换效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现图片切换效果，供大家参考，具体内容如下 用js实现点击按钮，图片切换的效果： 结构：用一个固定宽高的div来做最外层的容器，设置overflow为hidden， 然后内层img_box设置宽度为四倍box的宽度，高度相同，也就是
-
本文向大家介绍简单实现JavaScript图片切换效果，包括了简单实现JavaScript图片切换效果的使用技巧和注意事项，需要的朋友参考一下 JavaScript实现图片切换，主要用到setInterval()函数和clearInterval()函数，前者功能是开启动画，后者功能则为清除动画（可理解为使动画停止），为了使动画停止，则需要定义全局变量作为标志，标志返回setInterval()函数
-
本文向大家介绍使用javascript实现简单的选项卡切换，包括了使用javascript实现简单的选项卡切换的使用技巧和注意事项，需要的朋友参考一下 代码相当简洁、简单易懂，就不多废话了。 直接奉上代码： ------demo.js--------------- 是不是很简单就实现了选项卡的切换效果呢，小伙伴们自己美化下就可以用到自己项目中去了。
-
本文向大家介绍JavaScript实现微信号随机切换代码，包括了JavaScript实现微信号随机切换代码的使用技巧和注意事项，需要的朋友参考一下 js实现微信号随机切换，代码分为js和html部分，大家参考下 js代码： html代码： 总结 以上所述是小编给大家介绍的JavaScript实现微信号随机切换代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感
-
本文向大家介绍JavaScript实现背景自动切换小案例，包括了JavaScript实现背景自动切换小案例的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现背景自动切换的具体代码，供大家参考，具体内容如下 功能： 窗口打开背景图自动跳转切换 所有代码： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。