Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2007
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Using document.getElementById to get table data

    How can I manipulate the code below to capture multipile elements? I don't want to copy the function a bunch of times. I know that works but there is an easier way I just can;t figure it out.

    Example: I need to be able to capture 'cell2', 'cell3', 'cell4' and copy to 'input2','input3'
    ,'input4'.


    Thanks

    [CODE] <html>
    <head>
    <title>Testing JavaScript</title>
    <script language="JavaScript">
    function copytext(source_id, dest_id) {
    var s = document.getElementById(source_id);
    var d = document.getElementById(dest_id);
    d.value=s.innerHTML;
    }
    </script>
    </head>
    <body>
    <h1>Testing JavaScript</h1>
    <form>
    <table>
    <tr>
    <td id="cell1">a string of text</td>
    <td><input type="button" value=">>" onclick="copytext('cell1', 'input1')" /></td>
    <td><input type="text" id="input1" width="20"></td>
    </tr>
    </table>
    </form>
    </body>
    </html>
    [CODE]

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,950
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <table id="tbl">
    <tr>
      <td>a string of text 1 (row 1)</td>
      <td>a string of text 2 (row 1)</td>
      <td>a string of text 3 (row 1)</td>
      <td>a string of text 4 (row 1)</td>
      <td><button type="button">&gt;&gt;</button></td>
      <td>
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
      </td>
    </tr>
    <tr>
      <td>a string of text 1 (row 2)</td>
      <td>a string of text 2 (row 2)</td>
      <td>a string of text 3 (row 2)</td>
      <td>a string of text 4 (row 2)</td>
      <td><button type="button">&gt;&gt;</button></td>
      <td>
          <input type="text" />
          <input type="text" />
          <input type="text" />
          <input type="text" />
      </td>
    </tr>
    </table>
    <script type="text/javascript">
    (function() {
      document.getElementById('tbl').onclick = function(e) {
        var clicked = e.target;
        if (clicked.tagName == 'BUTTON'){
          var row = clicked.parentNode.parentNode,
            cells = row.getElementsByTagName('td'),
            inputs = cells[cells.length - 1].getElementsByTagName('input'),
            buttonCellIndex = clicked.parentNode.cellIndex;
          for (var i = 0; i < buttonCellIndex; i++) {
            inputs[i].value = cells[i].innerHTML;
          }
        }
      };
    })();
    </script>

  • Users who have thanked glenngv for this post:

    JANSSON17 (07-30-2013)

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Unless this is some class, and you have to do it this way to get a good grade, it's not a very efficient way to do it. Otherwise, assign the tds a class name, or use getElementsByTagName to make an array of them, and loop over them.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • Users who have thanked DrDOS for this post:

    JANSSON17 (07-31-2013)


  •  

    Tags for this Thread

    Posting Permissions

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