How to add row at the end of table with JS?

Question

How to insert new row to the end of table?, and how to make the button (that needs to hide the same row) display after check the checkbox??

I dont know how to call the element by name insted of id like I use too... i tried to search in the web but nothing was helpful.

without change anything in the HTML ! *

$(function(){
  console.log("Loaded")
  $("tr").hover(function () {
    $(this).css("background","#F8F8F8");
  },function () {
    $(this).css("background","");
  }); 

  $("#add").click(function() {
    //something here?? 
  });
});

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="q2.js"></script>
    <style>
    .hidden {
        display: none
    }
    </style>
</head>

<body>
    <div id='main'>
        <div id='button'>
            <button id='add'>Add row</button>
            <button id='hide' class='hidden'>Hide row</button>
        </div>
        <table>
            <tr>
                <td>
                    <input type='checkbox' name='row1'>
                </td>
                <td>First row</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' name='row2'>
                </td>
                <td>Second row</td>
            </tr>
            <tr>
                <td>
                    <input type='checkbox' name='row3'>
                </td>
                <td>Third row</td>
            </tr>
        </table>
    </div>
</body>

</html>

Searching on [*\[jquery\] add row to table*](https://stackoverflow.com/search?q=%5Bjquery%5D+add+row+to+table) returned [*Add table row in jQuery*](https://stackoverflow.com/questions/171027/add-table-row-in-jquery) from 10 years ago. — RobG, Mar 07 '18 at 11:48

score 1 · Answer 1 · 2018-03-07T11:57:24.740

I could not really get your main thought about the question.

Hoever, adding new rows to a table could be done using this code:

   // plain javascript add row function
  function addRow() {
    var tableRef = document.getElementById('myTable')
    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode('myrow')
    newCell.appendChild(newText);
  }

// jQuery event listener
 $("#add").click(function() {
   addRow()
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
  <div id='button'>
    <button id='add'>Add row</button>
    <button id='hide' class='hidden'>Hide row</button>
  </div>
  <table id="myTable">
    <tr>
      <td><input type='checkbox' name='row1'></td>
      <td>First row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row2'></td>
      <td>Second row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row3'></td>
      <td>Third row</td>
    </tr>
  </table>
</div>

Let me know if this is what you like to achieve or not. :)

Not what I ment for.. You cant change or add anything to the HTML.. When the checkbox is marked - only then - the hide button appears. — Chen890, Mar 07 '18 at 14:43

score 0 · Answer 2 · answered Mar 07 '18 at 11:50

0

Use

tablePart.innerHTML = "string that I want to place into a part of my table"

or

 tablePart.innerText = "string that I want to place into a part of my table"

You can get the table part by giving them ID's and using Javascript -tablePart document.getElementById("td") eg;

answered Mar 07 '18 at 11:50

SomethingCool

303
2
20

The OP is using jQuery, so it's better to use jQuery syntax there also. – nyr1o Mar 07 '18 at 11:51
cant use document.getElementById("td") . there is no id – Chen890 Mar 07 '18 at 14:46
make a new row, change its display to none and add your td ID there or anything else you want to. Once you done that. now get the row by ID, change its style like this: `rowID.style.display = ""` now its visible and you can proceed to be adding to your td element – SomethingCool Mar 07 '18 at 14:58

score 0 · Answer 3 · answered Mar 07 '18 at 14:48

check this

   // plain javascript add row function
  function addRow() {
    var tableRef = document.getElementById('myTable')
    var newRow = tableRef.insertRow(tableRef.rows.length);
    var newCell = newRow.insertCell(0);
    var newText = document.createTextNode('myrow')
    newCell.appendChild(newText);
  }
   function deleterow() {
     var table = document.getElementById('myTable');
     var rowCount = table.rows.length;

  table.deleteRow(rowCount -1);
}
// jQuery event listener
 $("#add").click(function() {
   addRow()
 });
 $("#hide").click(function() {
   deleterow();
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
  <div id='button'>
    <button id='add'>Add row</button>
    <button id='hide' class='hidden'>Hide row</button>
  </div>
  <table id="myTable">
    <tr>
      <td><input type='checkbox' name='row1'></td>
      <td>First row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row2'></td>
      <td>Second row</td>
    </tr>
    <tr>
      <td><input type='checkbox' name='row3'></td>
      <td>Third row</td>
    </tr>
  </table>
</div>

How to add row at the end of table with JS?

3 Answers3