在html表的另一行中复制特定行

Question

Hello I have difficulties to find a simple solution, maybe some of you will be able to help me.

What I would like to do is merge information from two differents columns in another row from the table.

Let me explain with an exemple it will be easier.

Here current html code :

<table class="audit_table" id="audit_table_data">

<tr>
  <th>Name</th>
  <th>Interfaces</th>
  <th>Subnet</th>
</tr>

<tr id="74">
  <td>water</td>
  <td>Ethernet</td>
  <td>Default</td>
</tr>

<tr id="74">
  <td>water</td>
  <td>Test</td>
  <td>Sub_Test</td>
</tr>

</table>

Here the expect result :

<table class="table_class" id="table">
<tr>
  <th>Name</th>
  <th>Interfaces</th>
  <th>Subnet</th>
</tr>

<tr id="74">
  <td>water</td>
  <td>Ethernet<br>Test</td>
  <td>Default<br>Sub_Test</td>
</tr>
</table>

As the two tr elements have the same id, is this possible to do that ?

Answer 1

your should use same class for two 'tr' elements:

 <table class="audit_table" id="audit_table_data"> <tr> <th>Name</th> <th>Interfaces</th> <th>Subnet</th> </tr> <tr class="74"> <td rowspan="2">water</td> <td>Ethernet</td> <td rowspan="2">Default</td> </tr> <tr> <td>test</td> </tr> <tr class="74"> <td rowspan="2">water</td> <td>Test</td> <td rowspan="2">Sub_Test</td> </tr> <tr> <td>sub_test</td> </tr> </table> 

Answer 2

It is not correct to have the same ID twice in a page, but, as a workaround you can change one of them to something different and then call 'getElementById' again to return you another element. Below is a sample of what you need actually:

 //get the first element (row) by id var a = document.getElementById(74); //assign a different id to it a.setAttribute("id", "99"); //get the second element (row) now var b = document.getElementById(74); //get nr of columns var columns = a.getElementsByTagName('td').length; for (var i = 0; i < columns; i++) { //if we have the same string in the same column for both rows we do nothing if (a.getElementsByTagName('td')[i].innerHTML == b.getElementsByTagName('td')[i].innerHTML) continue; //we add the column from the second row to the first row a.getElementsByTagName('td')[i].innerHTML += "<br>" + b.getElementsByTagName('td')[i].innerHTML; } //we remove the second row remaining with the first one which was previously modified b.remove(); 

 <table class="audit_table" id="audit_table_data"> <tr> <th>Name</th> <th>Interfaces</th> <th>Subnet</th> </tr> <tr id="74"> <td>water</td> <td>Ethernet</td> <td>Default</td> </tr> <tr id="74"> <td>water</td> <td>Test</td> <td>Sub_Test</td> </tr> </table> 

What I did above was to modify the first row to contain in the cells both strings as information and then delete the second row.