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
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    change table row

    Hi!

    How can I replace a table row with another row with new elements. Below I have a table with one row. How can I create a onclick function to replace the table row with a new row and elements.



    Code:
       <table name="myTable" border="0" cellpadding="0" cellspacing="0" width="50%">
        <tr id="row1">
          <td width="50%">
            
              <input type="text" name="name" size="20">
            
          <td width="50%">
            
              <select size="1" name="cars">
              <option value="ford">ford</option>
              <option value="chevy">chevy</option>
             
              </select>
        </tr>
        <tr id="row2">
          <td width="50%"></td>
          <td width="50%"></td>
        </tr>
      </table>
      
      
      
      
    <a onClick="changeRow();" href="#"> Click to Change Row</a>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    Code:
    <!doctype html>
    <html>
    <head>
    <title>Swap Rows</title>
    
    </head> 
    <body> 
    <table id="myTable" border="0" cellpadding="0" cellspacing="0" width="50%">
        <tr id="row1">
          <td width="50%">
            
              <input type="text" name="name" size="20">
            
          <td width="50%">
            
              <select size="1" name="cars">
              <option value="ford">ford</option>
              <option value="chevy">chevy</option>
             
              </select>
        </tr>
        <tr id="row2">
          <td width="50%">row2</td>
          <td width="50%">row2</td>
        </tr>
      </table>
      <table id="altTable" style="display:none;">
      <tr id="row3">
          <td width="50%">row3</td>
          <td width="50%">row3</td>
        </tr></table>
      
      
    <a onClick="swapRow();" href="#"> Click to Change Row</a> 
    <script>
    var row2 = document.getElementById("row2");
    var row3 = document.getElementById("row3");
    var altTable = document.getElementById("altTable");
    var myTable = document.getElementById("myTable");
    function swapRow(){
    	altTable.appendChild(row2);
    	myTable.appendChild(row3);
    }
    </script>
    
    </body></html>

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    I was looking to replace "row1" of "myTable" with a new row with new elements. How can I do this?


  •  

    Posting Permissions

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