Sposta td alla nuova colonna

Question

Ho una tabella del genere:

<table> 
    <tr> 
    <td>some column|1</td> 
    <td id="abc|1">abc</td> 
    </tr> 
    <tr> 
    <td>another column|1</td> 
    <td id="def|1">def</td> 
    </tr> 
    <tr> 
    <td>some column|2</td> 
    <td id="abc|2">abc</td> 
    </tr> 
    <tr> 
    <td>another column|2</td> 
    <td id="def|2">def</td> 
    </tr> 
</table> 

Come posso spostare il tds con il suffisso |2 verso destra, in modo da aggiungere un 3 ° colonna? Inoltre, i restanti "vuoti" td "alcune colonne | 2" e "un'altra colonna | 2" devono essere rimossi completamente.

Il risultato finale dovrebbe apparire come segue:

Questo è il codice desiderato:

<table> 
    <tr> 
    <td>some column|1</td> 
    <td id="abc|1">abc</td> 
    <td id="abc|2">abc</td> 
    </tr> 
    <tr> 
    <td>another column|1</td> 
    <td id="def|1">def</td> 
    <td id="def|2">def</td> 
    </tr> 
</table> 

Questo è il mio approccio, che non funziona:

$("table td:nth-child(2)[id$=2]").after("table td:nth-child(2)"); 

FIDDLE.

Answer 1

Un modo per ottenere ciò che si vuole:

// Values for new column to be added 
 
var newVals = $("table td:nth-child(2)[id$=2]"); 
 

 
$("table td:nth-child(2)[id$=1]").each(function (ind) { 
 
    if (ind < newVals.length) { 
 
    // Get New Element to add 
 
    var newElement = newVals[ind]; 
 
    // Remove original row for this element 
 
    $(newElement).parent().remove(); 
 
    // Append to new column 
 
    $(this).after($(newElement));     
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>some column|1</td> 
 
    <td id="abc|1">abc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>another column|1</td> 
 
    <td id="def|1">def</td> 
 
    </tr> 
 
    <tr> 
 
    <td>ome column|2</td> 
 
    <td id="abc|2">abc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>another column|2</td> 
 
    <td id="def|2">def</td> 
 
    </tr> 
 
</table>

Answer 2

Provare a cambiare gli ID utilizzando sottolineatura come un delimitatore come questo: abc_1 e provare questo codice (FIDDLE):

HTML

<table> 
    <tr> 
    <td>some column|1</td> 
    <td id="abc_1" class="text-cell">abc</td> 
    </tr> 
    <tr> 
    <td>another column|1</td> 
    <td id="def_1" class="text-cell">def</td> 
    </tr> 
    <tr> 
    <td>ome column|2</td> 
    <td id="abc_2" class="text-cell">abc</td> 
    </tr> 
    <tr> 
    <td>another column|2</td> 
    <td id="def_2" class="text-cell">def</td> 
    </tr> 
</table> 

jQuery

var tbl = $('table'); 
tbl.find('tr').each(function() { 
    var row = $(this); 
    var txtCell = row.find('.text-cell'); 
    var cellId = txtCell.attr('id'); 
    var cellArr = cellId.split('_'); 
    var idLeft = cellArr[0]; 
    var idRight = cellArr[1]; 
    if (idRight == '1') { 
     var child = $('#' + idLeft + '_2'); 
     var cTxt = child.text(); 
     child.closest('tr').remove(); 
     row.append('<td>' + cTxt + '</td>');  
    } 
}); 

Answer 3

Usa questo codice

var firstTd = $("table").find("tr:nth-child(3) > td:nth-child(2)"); 
 
var secondTd = $("table").find("tr:nth-child(4) > td:nth-child(2)"); 
 

 
$("table").find("tr:nth-child(3), tr:nth-child(4)").remove(); 
 
$("table").find("tr:nth-child(1)").append(firstTd); 
 
$("table").find("tr:nth-child(2)").append(secondTd);

table, tr, td { 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>some column|1</td> 
 
    <td id="abc|1">abc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>another column|1</td> 
 
    <td id="def|1">def</td> 
 
    </tr> 
 
    <tr> 
 
    <td>some column|2</td> 
 
    <td id="abc|2">abc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>another column|2</td> 
 
    <td id="def|2">def</td> 
 
    </tr> 
 
</table>

Answer 4

Ecco come lo farei:

<script> 
    $("table [id$='|2']").each(function(){ 
    var id = $(this).attr('id').split('|')[0]; 
    $("#"+id+"\\|1").parent().append('<td>'+$(this).html()+'</td>'); 
    $(this).parent().remove(); 
    }); 
</script>