CODEWITHSUNDEEP
javascriptjquery
Chen890
Chen890

Reputation: 31

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

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.

$(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>

Upvotes: 1

Views: 2619

Answers (3)

Adaleni
Adaleni

Reputation: 976

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>

Upvotes: 0

user9453460
user9453460

Reputation:

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. :)

Upvotes: 1

SomethingCool
SomethingCool

Reputation: 303

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;

Upvotes: 0

Related Questions