none
一个表格 4行两列(不算标题行) 每个td中都有文本框。 想点击第二列的文本框后,第一列文本框自动赋值。 RRS feed

  • 问题

  • <html>
    <head>
        <title></title>
        <style type="text/css">
            .table td
            {
                height: 20px;
                border: solid 1px #000000;
            }
            .table td input
            {
                border: 0px;
                padding: 0px;
                width: 100%;
            }
        </style>
        <script type="text/jscript">
         window.onload=function()//我知道这样做不对。但是不知道如何做。还有,我不想在input上加onclick事件。
         {
            for(var i=1;i<=4;i++)
            {
                if(document.getElementById("nr"+i).onclick)
                {
                    document.getElementById("no"+i).value=i;
                }
            }
         }
        </script>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 95%;"
            class="table" align="center">
            <tr>
                <td>
                    序号
                </td>
                <td>
                    内容
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_1" />
                </td>
                <td>
                    <input type="text" id="nr_1"  />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_2" />
                </td>
                <td>
                    <input type="text" id="nr2" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_3" />
                </td>
                <td>
                    <input type="text" id="nr3" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_4" />
                </td>
                <td>
                    <input type="text" id="nr4" />
                </td>
            </tr>
        </table>
    </body>
    </html>
    
    • 已移动 Sheng Jiang 蒋晟 2009年5月1日 11:45 客户端脚本问题 (From:ASP.NET 与 AJAX)
    2009年4月30日 15:04

答案

  • <script>
    
     window.onload=function()
    
     {
    
        for(var i=1;i<=4;i++)
    
        {
    
            document.getElementById("nr"+i).onclick=function(evt)
    
            {
    
            	
    
             ele = evt? evt.target:window.event.srcElement     
    
     
    
             document.getElementById("no_"+ele.id.substr(2)).value=ele.value
    
            }
    
         
    
           
    
        }
    
     }
    
    </script>
    
    
    
    另外,将你的<input type="text" id="nr_1"  />改成<input type="text" id="nr1"  />以保持一致

    • 已标记为答案 杜宏宇 2009年5月1日 7:31
    2009年5月1日 4:16
    版主
  • 直接用setAttribute方法是最方便的了。。。。

    IE FF 任何浏览器都支持。。

    低调,低调
    • 已标记为答案 杜宏宇 2009年5月1日 7:30
    2009年5月1日 7:19

全部回复

  • LZ你这样肯定错了,你注册的事件是在Web打开的时候执行的,也就是说,页面打开的时候,循环一下,如果点击了一个,然后另一个就响应,肯定错了。因为加载后这个就不会再执行了。一个正确的思路应该是。

    1.打开窗体的时候为相应的控件添加事件属性,如

    for(...)
    {
    var control = document.getElementById("nr"+i);
             control.setAttribute("onclick","修改上面一个Id控件值的方法"); //添加onclick事件
    //这样其实就是给每个input添加了一个onclick属性,然后在页面生命周期内都是可以运行的。
    }

    修改Id控件值的方法很简单,你可以自己看一下,实在不行再讨论咯 :)

    低调,低调
    2009年4月30日 16:06
  • window.onload = function() {
    	document.getElementById("nr_1").attachEvent("onclick", function() { document.getElementById("no_1").value = 1; });
    }
    你好,如果是 IE 你可以通过attachEvent注册事件,ff 通过 addEventListener注册事件
    知识改变命运,奋斗成就人生!
    2009年5月1日 3:24
    版主
  • <script>
    
     window.onload=function()
    
     {
    
        for(var i=1;i<=4;i++)
    
        {
    
            document.getElementById("nr"+i).onclick=function(evt)
    
            {
    
            	
    
             ele = evt? evt.target:window.event.srcElement     
    
     
    
             document.getElementById("no_"+ele.id.substr(2)).value=ele.value
    
            }
    
         
    
           
    
        }
    
     }
    
    </script>
    
    
    
    另外,将你的<input type="text" id="nr_1"  />改成<input type="text" id="nr1"  />以保持一致

    • 已标记为答案 杜宏宇 2009年5月1日 7:31
    2009年5月1日 4:16
    版主
  • 孟老师,好像还是不行,以下是全部代码,麻烦您试一下。
    <html>
    <head>
        <title></title>
        <style type="text/css">
            .table td
            {
                height: 20px;
                border: solid 1px #000000;
            }
            .table td input
            {
                border: 0px;
                padding: 0px;
                width: 100%;
            }
        </style>
        <script type="text/jscript">
     window.onload=function()
     {
        for(var i=1;i<=4;i++)
        {
            document.getElementById("nr"+i).onclick=function(evt)
            {
             ele = evt? evt.target:window.event.srcElement     
             document.getElementById("no_"+ele.id.substr(2)).value=ele.value
            }
        }
     }
    </script>
    </head>
    <body>
        <table cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 95%;"
            class="table" align="center">
            <tr>
                <td>
                    序号
                </td>
                <td>
                    内容
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_1" />
                </td>
                <td>
                    <input type="text" id="nr1"  />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_2" />
                </td>
                <td>
                    <input type="text" id="nr2" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_3" />
                </td>
                <td>
                    <input type="text" id="nr3" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" id="no_4" />
                </td>
                <td>
                    <input type="text" id="nr4" />
                </td>
            </tr>
        </table>
    </body>
    </html>
    
    • 已标记为答案 杜宏宇 2009年5月1日 7:30
    • 取消答案标记 杜宏宇 2009年5月1日 7:31
    2009年5月1日 6:58
  • 直接用setAttribute方法是最方便的了。。。。

    IE FF 任何浏览器都支持。。

    低调,低调
    • 已标记为答案 杜宏宇 2009年5月1日 7:30
    2009年5月1日 7:19