Results 1 to 6 of 6

Thread: How to carry td value to input text?

  1. #1
    Join Date
    Mar 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to carry td value to input text?

    hi all
    How can I double click my td of the table and carry the value in the td to the input text?Below is some code of mine.

    ==============================================
    <head>
    <script type="text/javascript">
    function kk(){
    //carry td value to input text function
    }
    </script>
    </head>

    <body>
    <table border="1">
    <tr>
    <td ondblclick="kk()">Lee</td>
    <td>10</td>
    </tr>
    <tr>
    <td ondblclick="kk()">Chung</td>
    <td>12</td>
    </tr>
    </table>

    <hr />
    Name:<input type="text" id="aa" />
    </body>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <head>
    <script type="text/javascript">
    function kk(el){
    document.getElementById('aa').value=el.innerHTML;
    }
    </script>
    </head>
    
    <body>
    <table border="1">
    <tr>
    <td ondblclick="kk(this);">Lee</td>
    <td>10</td>
    </tr>
    <tr>
    <td ondblclick="kk(this);">Chung</td>
    <td>12</td>
    </tr>
    </table>
    
    <hr />
    Name:<input type="text" id="aa" />
    </body>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks jscheuer1, your code works fine.
    I go head the question. If I want to double-click any td in the same tr and carry the whole tr value to the matched input text, how to modify the code?for example, when I double-click the "Lee", then inpute text "aa" get value "Lee" and input text "bb" get value "10".
    <head>
    <script type="text/javascript">
    function kk(el){
    document.getElementById('aa').value=el.innerHTML;
    }
    </script>
    </head>

    <body>
    <table border="1">
    <tr>
    <td ondblclick="kk(this);">Lee</td>
    <td>10</td>
    </tr>
    <tr>
    <td ondblclick="kk(this);">Chung</td>
    <td>12</td>
    </tr>
    </table>

    <hr />
    Name:<input type="text" id="aa" />
    age:<input type="text" id="bb" />
    </body>

  4. #4
    Join Date
    Jun 2006
    Location
    Acton Ontario Canada.
    Posts
    677
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    this:
    <script type="text/javascript">
    function kk(el){
    document.getElementById('aa').value=el;
    }
    </script>
    and:
    <td ondblclick="kk(10);">Lee</td>
    - Ryan "Boxxertrumps" Trumpa
    Come back once it validates: HTML, CSS, JS.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by boxxertrumps View Post
    this:
    <script type="text/javascript">
    function kk(el){
    document.getElementById('aa').value=el;
    }
    </script>
    and:
    <td ondblclick="kk(10);">Lee</td>
    I think writeman wants one function to do both things. Also, I wanted to suggest earlier and am going to do so now that, ondblclick is a poor choice. In IE, Opera and FF, it will highlight the cell that's double clicked, even though both cells are being 'selected'. In Opera, it will also pop up the context menu. In some other browsers, it may do other things. All of this is unnecessarily distracting. I vote to changing to onclick as I have in the below demo:

    Code:
    <head>
    <script type="text/javascript">
    function kk(el){
    document.getElementById('aa').value=el.cells[0].innerHTML;
    document.getElementById('bb').value=el.cells[1].innerHTML;
    return false;
    }
    </script>
    </head>
    
    <body>
    <table border="1">
    <tr onclick="return kk(this);">
    <td>Lee</td>
    <td>10</td>
    </tr>
    <tr onclick="return kk(this);">
    <td>Chung</td>
    <td>12</td>
    </tr>
    </table>
    
    <hr />
    Name:<input type="text" id="aa" /> Num:<input type="text" id="bb" />
    </body>
    If for some reason you just have to have it be ondblclick, you can easily change it back.

    Note: I've moved the event to the <tr> element.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Mar 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    3Q very much. I got the mission and changed the dblclick to click. Thanks.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •