题目：当点击按钮时，如何实现两个td的值互换？【js】

题目：当点击按钮时，如何实现两个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;
        };


        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">
      
      
        <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>

知识点：

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的对象
<!--</script>     */
相关阅读:
mvc源码解读(2)mvc路由注册
 mvc源码解读(12)mvc四大过滤器之ActionFilter
asp.net运行机制与页面生命周期
 mvc源码解读(5)Controller工厂的创建
 mvc源码解读(9)ActionDescriptor方法Action的描述对象
 mvc源码解析(7)创建Controller对象
 mvc源码解读(11)mvc四大过滤器之AuthorizationFilter
mvc源码解读(19)mvc客户端+服务端验证
 get与post
mvc源码解析(6)获取ControllerType
原文地址：https://www.cnblogs.com/muer/p/1715317.html