Hay una tabla con una columna que quiero separar en dos. El contenido de la celda de esta columna es, por ejemplo,
| Miami: banana | | Ft. Myers: pineapple |Ahora quiero dividir esto en dos columnas (y celdas) para que aparezca así:
| Miami | banana | // <td> Miami </td><td> banana </td> | Ft. Myers | pineapple | // <td> Ft. Myers </td><td> pineapple </td>Hice un JavaScript para lograr esto:
function foo(str) { result = str.replace(": ", "</td><td>"); } $("td.valueCol").each(function(){ $("td.valueCol").html(foo($(this).text())); }El resultado sin embargo es:
| bananas | // <td>bananas</td> | pineapple | // <td>pineapple</td> Cuando lo pruebo con una etiqueta no analizada como result = str.replace(": ", "</xt><xt>") , muestra que las etiquetas se intercambian y se agregan comillas a la parte anterior a la etiqueta:
| Miamibarbananas | // <td>"Miamibar"<xt>bananas</xt></td> | Ft. Myersbarpineapple | Obviamente, replace o html() aplica algún tipo de desinfección. ¿Qué es esto y qué tengo que hacer para que funcione correctamente?
Acabo de jugar un poco con algo de JavaScript Vanilla y resulta que .outerHTML podría "ser tu amigo" aquí:
document.querySelectorAll("td") .forEach(td=>td.outerHTML=td.outerHTML.replace(":","</td><td>")) TD {border: 1px solid grey} <table> <tr><td>a:b</td><td>v:d</td><td>ef</td></tr> <tr><td>f:h</td><td>i:j</td><td>kl</td></tr> <tr><td>m:n</td><td>o:p</td><td>rs</td></tr> </table>Puede usar insertAfter() de jQuery para crear un nuevo TD junto al que está dividiendo.
$('table td').each(function() { let v = $(this).text().split(':'); if (v.length > 1) { $(this).text(v[0]); $(`<td>${v[1]}</td>`).insertAfter($(this)) } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border='1'> <tr> <td>Miami: banana</td> <td>Ft. Myers: pineapple</td> </tr> </table>en primer lugar, quería decir cuándo está seleccionando todos los elementos td y anidándolos con más td dentro de ellos, lo que no es html válido, aunque el navegador resolverá esto, así que lo que se me ocurrió fue seleccionar todas las filas y crear nuevos td en un nivel por matriz dividida de la siguiente manera
$("tr").each(function(){ // iterate once per row let values = $(this).text().split(":"), newMarkup = "" values.forEach(function(each){newMarkup += "<td>" + each.trim() + "</td>"}) $(this).html(newMarkup) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> tr,td { border:1px solid black; padding:2px; } td {padding:5px;} </style> <table> <tbody> <tr><td>Miami: banana</td></tr> <tr><td>Ft. Myers: pineapple</td></tr> </tbody> </table>