skip to Main Content
<!DOCTYPE html>
<html>
<style>
</style>
<body>
  <h3 style="text-align:center">Schedule</h3>
  <table id="editableTable" class="center">
    <thead>
      <tr>
        <th>Name:</th>
        <th>Surname:</th>
        <th>Telephone:</th>
        <th>Address:</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><input type="text"></td>
        <td><button class="btnAdd" onclick="moveToSeparateTable(this)">Add</button></td>
      </tr>
    </tbody>
  </table>
</body>
</html>"

I am struggeling with getting the button in my table to work.

If I have the button code as a "part of the table" it works just fine. But when I try to remove around it the function doesnt work as it is supposed to.

I dont want it to be part of the table. It has to be underneath it.

3

Answers


  1. Just Remove the Button tag from the code.

    <!DOCTYPE html>
    <html>
      <body>
        <h3 style="text-align:center">Schedule</h3>
    
        <table id="editableTable" class="center">
          <thead>
            <tr>
              <th>Name:</th>
              <th>Surname:</th>
              <th>Telephone:</th>
              <th>Address:</th>
            </tr>
          </thead>
    
          <tbody>
            <tr>
              <td><input type="text"></td>
              <td><input type="text"></td>
              <td><input type="text"></td>
              <td><input type="text"></td>
            </tr>
          </tbody>
        </table>
      </body>
    </html>
    Login or Signup to reply.
  2. I am not sure what you want completely and would probably need to see the JS to help in a more complete way. I also don’t know based off the demo if you have done anything with CSS either, so this might be completely useless.

    One way to possibly do this is to set one button’s display to none depending on what you want the rest of the website to look like. Then just have another button with its display set to block and have the display switched when clicked.

    Login or Signup to reply.
  3. How many rows will be in this table? I guess only one?

    If so, this is more like a form and not a table.

    The user will fill the text boxes and click the button to add the information in another table? While there are better ways to have the user fill in the information, let’s use the table with single row.

    Move the button whenever you want in the page and write a script block that finds that single row of the table, takes a copy of it, appends it to another table.

    That would be something like this:

    function copyUserInputRowToSeparateTable() {
      // find the row and take copy of it
      const row = (document.querySelector('#editableTable tr')).cloneNode(true /* deep */);
      
      // reference to second table
      const separateTable = ....
    
      separateTable.appendChild(row);
    }
    

    Add this function to button’s click event:

    <button class="btnAdd" onclick="copyUserInputRowToSeparateTable()">Add</button>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search