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

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票 
    <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
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票 
    <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
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    直接用setAttribute方法是最方便的了。。。。

    IE FF 任何浏览器都支持。。
    低调，低调
    • 已标记为答案 杜宏宇 2009年5月1日 7:30
    2009年5月1日 7:19
    |

全部回复

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

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

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

    修改Id控件值的方法很简单，你可以自己看一下，实在不行再讨论咯 ：）
    低调，低调
    2009年4月30日 16:06
    |
  • Question
    登录进行投票
    0
    登录进行投票 
    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
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票 
    <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
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    孟老师，好像还是不行，以下是全部代码，麻烦您试一下。
    <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
    |
  • Question
    登录进行投票
    0
    登录进行投票
    直接用setAttribute方法是最方便的了。。。。

    IE FF 任何浏览器都支持。。
    低调，低调
    • 已标记为答案 杜宏宇 2009年5月1日 7:30
    2009年5月1日 7:19
    |