题目：当点击按钮时，如何实现两个td的值互换？【js】
题目：当点击按钮时，如何实现两个td的值互换？
用javascript实现此功能。
分析：
这个题主要是考变量传值。其次是考如何取元素的值。
第一种代码如下：
第一种方法
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//<![CDATA[
/*
题目：当点击按钮时，如何实现两个td的值互换？
用javascript实现此功能。
分析：
这个题主要是考变量传值。其次是考如何取元素的值。
第一种代码如下：
*/
function submitbtn()
{
var tText1 = document.getElementById('txt1');
var SubmitBtn1 = document.getElementById('submitBtn1');
var tText2 = document.getElementById('txt2');
var SubmitBtn2 = document.getElementById('submitBtn2');
SubmitBtn1.onclick = function()
{
var temp = tText1.value;
tText1.value = tText2.value;
tText2.value = temp;
};
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//<![CDATA[
/*
题目：当点击按钮时，如何实现两个td的值互换？
用javascript实现此功能。
分析：
这个题主要是考变量传值。其次是考如何取元素的值。
第一种代码如下：
*/
function submitbtn()
{
var tText1 = document.getElementById('txt1');
var SubmitBtn1 = document.getElementById('submitBtn1');
var tText2 = document.getElementById('txt2');
var SubmitBtn2 = document.getElementById('submitBtn2');
SubmitBtn1.onclick = function()
{
var temp = tText1.value;
tText1.value = tText2.value;
tText2.value = temp;
};
SubmitBtn2.onclick = function()
{
var temp = tText2.value;
tText2.value = tText1.value;
tText1.value = temp;
};
}
window.onload = function()//窗口加载的时候
{
submitbtn();
}
</script>
</head>
<body>
<input type="text" value="12345666" id="txt1" />
<input type="submit" id="submitBtn1" />
<input type="text" value="12345222" id="txt2" />
<input type="submit" id="submitBtn2" />
</body>
</html>
方法2
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Code1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//第二种代码如下：
function submitbtn()
{
var tText1 = document.getElementById('txt1');
var SubmitBtn1 = document.getElementById('submitBtn1');
var tText2 = document.getElementById('txt2');
var SubmitBtn2 = document.getElementById('submitBtn2');
SubmitBtn1.onclick = function()
{
var temp = tText1.innerHTML;
tText1.innerHTML = tText2.innerHTML;
tText2.innerHTML = temp;
};
SubmitBtn2.onclick = function()
{
var temp = tText2.innerHTML;
tText2.innerHTML = tText1.innerHTML;
tText1.innerHTML = temp;
};
}
window.onload = function()
{
submitbtn();
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="50" cellspacing="50">
<!-- cellspacing:两个单元格之间的空隙-->
<!-- cellpadding:内容到边框的距离-->
<tr>
<td id="txt1">
321445</td>
<td>
<input type="submit" id="submitBtn1" /></td>
</tr>
<tr>
<td id="txt2">
123133</td>
<td>
<input type="submit" id="submitBtn2" /></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Code1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//第二种代码如下：
function submitbtn()
{
var tText1 = document.getElementById('txt1');
var SubmitBtn1 = document.getElementById('submitBtn1');
var tText2 = document.getElementById('txt2');
var SubmitBtn2 = document.getElementById('submitBtn2');
SubmitBtn1.onclick = function()
{
var temp = tText1.innerHTML;
tText1.innerHTML = tText2.innerHTML;
tText2.innerHTML = temp;
};
SubmitBtn2.onclick = function()
{
var temp = tText2.innerHTML;
tText2.innerHTML = tText1.innerHTML;
tText1.innerHTML = temp;
};
}
window.onload = function()
{
submitbtn();
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="50" cellspacing="50">
<!-- cellspacing:两个单元格之间的空隙-->
<!-- cellpadding:内容到边框的距离-->
<tr>
<td id="txt1">
321445</td>
<td>
<input type="submit" id="submitBtn1" /></td>
</tr>
<tr>
<td id="txt2">
123133</td>
<td>
<input type="submit" id="submitBtn2" /></td>
</tr>
</table>
</body>
</html>
方法3
<html>
<head>
<title>Untitled Page</title>
<script type="text/javascript">
window.onload=function()
{
var ii,a="";
var d=document.getElementsByTagName("DIV"); //得到页面的DIV ，d是个数组
for(ii=0;ii <d.length;ii++)//循环得到每个DIV
{
if(d[ii].id=="top") //得到DIV的id等于top的标记，取DIV里面的元素
{
a=d[ii].getElementsByTagName("li"); //a也是个数组，div（top）里面的元素（li）循环放到a里面
for(var i=0;i <a.length;i++)
{
//
// a[i].onmouseover=function()
// {
// show(i)
// };
//此处的i是一个变量,在运行show取i的值,很显示你的i每次都会最终变成a.length
a[i].onmouseover=new Function("show("+i+")"); //这里的i是一个常量,就是此刻i是值
}
}
}
}
function show(z)
{
alert(z);
}
</script>
</head>
<body>
<div>
div1</div>
<div id="top">
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<ul>
<li>dd</li>
<li>dad</li>
</ul>
</div>
</body>
</html>
<head>
<title>Untitled Page</title>
<script type="text/javascript">
window.onload=function()
{
var ii,a="";
var d=document.getElementsByTagName("DIV"); //得到页面的DIV ，d是个数组
for(ii=0;ii <d.length;ii++)//循环得到每个DIV
{
if(d[ii].id=="top") //得到DIV的id等于top的标记，取DIV里面的元素
{
a=d[ii].getElementsByTagName("li"); //a也是个数组，div（top）里面的元素（li）循环放到a里面
for(var i=0;i <a.length;i++)
{
//
// a[i].onmouseover=function()
// {
// show(i)
// };
//此处的i是一个变量,在运行show取i的值,很显示你的i每次都会最终变成a.length
a[i].onmouseover=new Function("show("+i+")"); //这里的i是一个常量,就是此刻i是值
}
}
}
}
function show(z)
{
alert(z);
}
</script>
</head>
<body>
<div>
div1</div>
<div id="top">
<ul>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</ul>
<ul>
<li>dd</li>
<li>dad</li>
</ul>
</div>
</body>
</html>
知识点：
var obj=document.getElementsByTagName("input")什么意思？
/*
var obj=document.getElementsByTagName("input")什么意思？
tag指标签名
上面函数返回一数组，例：
<input type=text name=user>
<input type=pass name=password>
<script language=javascript>
<!--
var obj=document.getElementsByTagName("input")
//obj[0]取得name为user的对象
//obj[1]取得name为password的对象
