zoukankan      html  css  js  c++  java
  • 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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript">
        var tempcolor;
        function yz(obj)
        {
            if(obj.value == "改变")
            {
                obj.value = "提交"; //可以直接传对象
            }
            else
            {
                obj.value = "改变"; //可以直接传对象
            }
            
            return false; //返回为假。不提交
        }
        function tb()
        {
            //可以直接读取表单里的name属性元素。但是必须从表单开始,一级一级的找 --也可以直接用form表达来访问表单里的        //元素 如:form.ttt.value;
            form1.ttt.value=form1.txts.value; 
        }
        
        function changeover(obj)
        {
            tempcolor = obj.style.backgroundColor; //记录之前的元素
            obj.style.backgroundColor = "#F00";        
        }
        function changeout(obj)
        {
            obj.style.backgroundColor = tempcolor;
        }
        
        window.onload = function()
        {
            var obj = document.getElementsByTagName("tr");
            for(var i =0; i < obj.length; i++)
            {
                if(i%2==0) //下标从零开始。 所以得到效果是奇数行染色
                {
                    obj[i].style.backgroundColor="#00FF00";    
                }
            }
        }
    </script>
    </head>
    
    <body>
        <form name="form1" method="post" action="#">
            <input type="text" name="txts" onkeyup="tb();" />
             <!--传递本身 这个应用还可以用在动态改变表格的背景色。-->
            <input type="submit" value="提交" onclick="return yz(this);" />
            <input type="text" name="ttt" />
        </form>
        
        <!--实时改变表格背景色特效-->
        <table border="1" bordercolor="#000000" cellpadding="0" cellspacing="0">
            <tr height="20px" onmouseover="changeover(this);" onmouseout="changeout(this);"><td width="200px"></td><td width="200px"></td><td width="200px"></td></tr>
            <tr height="20px" onmouseover="changeover(this);" onmouseout="changeout(this);"><td></td><td></td><td></td></tr>
            <tr height="20px" onmouseover="changeover(this);" onmouseout="changeout(this);"><td></td><td></td><td></td></tr>
            <tr height="20px" onmouseover="changeover(this);" onmouseout="changeout(this);"><td></td><td></td><td></td></tr>
            <tr height="20px" onmouseover="changeover(this);" onmouseout="changeout(this);"><td></td><td></td><td></td></tr>
        </table>
    </body>
    </html>
  • 相关阅读:
    视图
    使用navicat for sqlserver 把excel中的数据导入到sqlserver数据库
    sql去重
    SQLserver连接本地服务器
    html中去掉文本框(input type="text")的边框或只显示下边框
    用户控件与页面间相互给各自的控件赋值
    easyui datagrid 去掉 全选checkbox
    ZebraDatepicker中文显示
    实现在点击asp:button按钮后,不刷新当前页面
    (转)ASP.NET(C#)FileUpload实现上传限定类型和大小的文件到服务器
  • 原文地址:https://www.cnblogs.com/clouds008/p/3101279.html
Copyright © 2011-2022 走看看