PHP: How to join two HTML tables into one? - php

Question

I have two HTML tables. Each has three rows and one column only. I'd like to join them programmatically such that I get one table with two columns and three rows.
Is there some function or hack to achieve this? How can I achieve this?
For example
First Table:
<table id="table_one">
<tbody>
<tr>
<td>
<label>data one</label>
</td>
</tr>
<tr>
<td>
<label>data two</label>
</td>
</tr>
<tr>
<td>
<label>data three</label>
</td>
</tr>
</tbody>
</table>
Second Table:
<table id="table_two">
<tbody>
<tr>
<td>
<label>data one</label>
</td>
</tr>
<tr>
<td>
<label>data two</label>
</td>
</tr>
<tr>
<td>
<label>data three</label>
</td>
</tr>
</tbody>
</table>
This is what I want from the above two tables:
<table id="table_three">
<tbody>
<tr>
<td>
<label>data one</label>
</td>
<td>
<label>data one</label>
</td>
</tr>
<tr>
<td>
<label>data two</label>
</td>
<td>
<label>data two</label>
</td>
</tr>
<tr>
<td>
<label>data three</label>
</td>
<td>
<label>data three</label>
</td>
</tr>
</tbody>
</table>

Answer 1

Well, this is a way to proceed (check in-code comments):
$table1 = <<<'_DATA_'
<table id="table_one">
<tbody>
<tr>
<td>
<label>data one</label>
</td>
</tr>
<tr>
<td>
<label>data two</label>
</td>
</tr>
<tr>
<td>
<label>data three</label>
</td>
</tr>
</tbody>
</table>
_DATA_;
$table2 = <<<'_DATA_'
<table id="table_two">
<tbody>
<tr>
<td>
<label>data one</label>
</td>
</tr>
<tr>
<td>
<label>data two</label>
</td>
</tr>
<tr>
<td>
<label>data three</label>
</td>
</tr>
</tbody>
</table>
_DATA_;
// Load teh 1st table
// Create a DOM object
$html1 = new simple_html_dom();
// Load HTML from a string
$html1->load($table1);
// Load teh 2nd table
// Create a DOM object
$html2 = new simple_html_dom();
// Load HTML from a string
$html2->load($table2);
// Find all rows from both tables
$rows1 = $html1->find('tr');
$rows2 = $html2->find('tr');
// Build teh 3rd table
$table3 = '<table id="table_three">
<tbody>';
// Insert rows cells from both initial tables
for ($i=0; $i < count($rows1); $i++) {
$table3 .= '<tr>';
// get row's innerhtml
$table3 .= $rows1[$i]->innertext;
$table3 .= $rows2[$i]->innertext;
$table3 .= '</tr>';
};
// finish the table
$table3 .= '</tbody>
</table>';
// Clear DOM objects
$html1->clear();
unset($html1);
$html2->clear();
unset($html2);
It creates this:

Answer 2

<table id="table_three">
<tbody>
</tbody>
</table>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#table_one tr').each(function(index){
var row = $(this);
var row2 = $('#table_two tr').get(index);
$(row).append($(row2).find('td'));
$('#table_three').append($(row));
});
});
</script>

Answer 3

Here's how I'd do it:
// assume we have the tables in three strings:
// table_one in $str_1, table_two in $str_2, and table_three in $str_3.
// create $str_3 by copying $str_1 and replacing the table ID
$str_3 = $str_1;
$str_3 = str_replace('table_one', 'table_three', $str_3);
// load table_two and table_three in simple-html-dom and collect the TD elements
$tab_2 = str_get_html($str_2);
$tab_3 = str_get_html($str_3);
$tds_3 = $tab_3->find("td");
$tds_2 = $tab_2->find("td");
// go through the TDs in table_three and append the corresponding table_two TD
$acc = 0;
foreach ($tds_3 as &$td) {
$td->outertext = $td->outertext . $tds_2[$acc]->outertext;
$acc++;
}
// done!
echo $tab_3;

Answer 4

Not sure I understood the question, but:
<?php
// first and second table
//Select data
$reponse = $bdd->prepare('SELECT data1, data2 FROM '.RESEARCH.' WHERE X=X');
$reponse->execute(array(X));
?>
//Begin table
<table id="table_one_or_two">
<tbody>
//Loop the rows
while ($data = $reponse->fetch())
{
<tr>
<td>
<label>$data['data1']</label>
</td>
</tr>
}
//end of loop, end of table
</tbody>
</table>
// 3TH table
//Select data
$reponse = $bdd->prepare('SELECT data1, data2 FROM '.RESEARCH.' WHERE X=X');
$reponse->execute(array(X));
?>
//Begin table
<table id="table_three">
<tbody>
//Loop the rows
while ($data = $reponse->fetch())
{
<tr>
<td>
<label>$data['data1']</label>
</td>
<td>
<label>$data['data2']</label>
</td>
</tr>
}
//end of loop, end of table
</tbody>
</table>