CODEWITHSUNDEEP
javascriptphphtml
Ken Ingram
Ken Ingram

Reputation: 1608

How does one insert <tr> into a <table> (using PHP)

I am using PHP and I have a table that I want to populate dynamically.

<table>
    <tr>
         <th>This One</th>
         <th>That One</th>
         <th>The Other One</th>
    </tr>
    <tr>
         <td>Final This</td>
         <td>Final That</td>
         <td>Final The Other</td>
   </tr>
</table>

I am populating the table data onchange, and I want the data to be added above the row marked with "Final blah".

Each new row has data to populate each cell.

Is there some functionality that will do this with PHP, mayber leveraging some JavaScript?

EDIT: I want to get a final product that looks like this:

<table>
    <tr>
         <th>This One</th>
         <th>That One</th>
         <th>The Other One</th>
    </tr>
    <tr> Dynamically added row. Cells already populated from database</tr>
    <tr> Next row of data from the database</tr>
    <tr> The next row should **ALWAYS** be the last row</tr>
    <tr>
         <td>Final This</td>
         <td>Final That</td>
         <td>Final The Other</td>
   </tr>
</table>

Notice that there is a HEADER ROW THAT I WANT TO KEEP!
I want to insert rows between the header row and the row with "Final something". The last row IS ALWAYS PRESENT.

Upvotes: 0

Views: 810

Answers (1)

helpdoc
helpdoc

Reputation: 1990

If i am getting your query :

 <table id="myTable">
  <tr>
     <th>This One</th>
     <th>That One</th>
     <th>The Other One</th>
  </tr>
   <tbody id="myid">
    <tr><td>Final This</td><td>Final That</td><td>This is your Last Row</td></tr>
   </tbody>
    </table>
    <br>

<button onclick="myCreateFunction()">Add row</button>

<script>
function myCreateFunction() {
    var table = document.getElementById("myid");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = "Final This";
    cell2.innerHTML = "Final That";
    cell3.innerHTML = "I am inserted between First and last row";
}

</script>

Fiddle

Upvotes: 1

Related Questions