tag inside from div javascript jquery tagname

inside - jQuery/javascript reemplazar tipo de etiqueta



jquery replace text (8)

¿Hay una manera fácil de recorrer todas las etiquetas td y cambiarlas a th? (etc).

Mi enfoque actual sería envolverlos con el th y luego quitar el td, pero luego pierdo otras propiedades, etc.


jQuery.replaceTagName

El siguiente es un complemento de jQuery para reemplazar el nombre de etiqueta de los elementos DOM.

Fuente

(function($) { $.fn.replaceTagName = function(replaceWith) { var tags = [], i = this.length; while (i--) { var newElement = document.createElement(replaceWith), thisi = this[i], thisia = thisi.attributes; for (var a = thisia.length - 1; a >= 0; a--) { var attrib = thisia[a]; newElement.setAttribute(attrib.name, attrib.value); }; newElement.innerHTML = thisi.innerHTML; $(thisi).after(newElement).remove(); tags[i] = newElement; } return $(tags); }; })(window.jQuery);

Fuente minificada

(function(e){e.fn.replaceTagName=function(t){var n=[],r=this.length;while(r--){var i=document.createElement(t),s=this[r],o=s.attributes;for(var u=o.length-1;u>=0;u--){var a=o[u];i.setAttribute(a.name,a.value)}i.innerHTML=s.innerHTML;e(s).after(i).remove();n[r]=i}return e(n)}})(window.jQuery);

Uso

Incluya la fuente minificada arriba en su javascript después de jQuery.

Entonces puedes usar el plugin así:

$(''div'').replaceTagName(''span''); // replace all divs with spans

O en tu caso esto:

$(''td'').replaceTagName(''th'');

Los selectores de jQuery funcionan como se espera

$(''.replace_us'').replaceTagName(''span''); // replace all elements with "replace_us" class with spans $(''#replace_me'').replaceTagName(''div''); // replace the element with the id "replace_me"

Más recursos

jsFiddle con Qunit tests


Bueno, esta pregunta es bastante antigua pero podría ayudar de todos modos: el único complemento jQuery que realmente funciona como se esperaba (no puede reutilizar el objeto devuelto en el otro, para agregar atributos, por ejemplo):

jQuery.fn.extend({ replaceTagName: function(replaceWith) { var tags=[]; this.each(function(i,oldTag) { var $oldTag=$(oldTag); var $newTag=$($("<div />").append($oldTag.clone(true)).html().replace(new RegExp("^<"+$oldTag.prop("tagName"),"i"),"<"+replaceWith)); $oldTag.after($newTag).remove(); tags.push($newTag.get(0)); }); return $(tags); } });

Además del $("td").replaceTagName("th"); básico $("td").replaceTagName("th"); también puede encadenar llamadas como $("td").replaceTagName("th").attr("title","test");

Versión reducida:

jQuery.fn.extend({replaceTagName:function(a){var b=[];this.each(function(d,c){var e=$(c);var f=$($("<div />").append(e.clone(true)).html().replace(new RegExp("^<"+e.prop("tagName"),"i"),"<"+a));e.after(f).remove();b.push(f.get(0))});return $(b)}});


Completamente sin probar, pero dando un giro a esto:

$("td").each(function(index) { var thisTD = this; var newElement = $("<th></th>"); $.each(this.attributes, function(index) { $(newElement).attr(thisTD.attributes[index].name, thisTD.attributes[index].value); }); $(this).after(newElement).remove(); });

Lo estoy mirando y mirando, ¡y no puedo pensar en una razón por la que no funcionaría!

1) bucle a través de cada elemento td
2) crear un nuevo elemento th
3) para cada uno de esos td''s, recorre cada uno de sus atributos
4) agregar ese atributo y valor al nuevo elemento th
5) una vez que todos los atributos estén en su lugar, agregue el elemento al DOM justo después de la td, y elimine la td

Edición: funciona bien: http://jsbin.com/uqofu3/edit


Esto es un poco más limpio que la respuesta de @ GlenCrawford y además copia a los hijos del elemento reemplazado.

$(''td'').each(function(){ var newElem = $(''<th></th>'', {html: $(this).html()}); $.each(this.attributes, function() { newElem.attr(this.name, this.value); }); $(this).replaceWith(newElem); });


Esto podría funcionar, pero no lo he probado extensivamente:

var tds = document.getElementsByTagName("td"); while(tds[0]){ var t = document.createElement("th"); var a = tds[0].attributes; for(var i=0;i<a.length;i++) t.setAttribute(a[i].nodeName,a[i].nodeValue); t.innerHTML = tds[0].innerHTML; tds[0].parentNode.insertBefore(t,tds[0]); tds[0].parentNode.removeChild(tds[0]); }

Espero que ayude de alguna manera.


Ligera adición a la respuesta de @GlenCrawford, para preservar también el texto interno con la línea:

newElement.text($(value).text());

Todos juntos ahora:

$("td").each(function(index) { var thisTD = this; var newElement = $("<th></th>"); newElement.text($(value).text()); $.each(this.attributes, function(index) { $(newElement).attr(thisTD.attributes[index].name, thisTD.attributes[index].value); }); $(this).after(newElement).remove(); });


$("td").each(function() { var tmp = $(''<div/>'').append($(this).clone(true)).html().replace(/td/i,''th''); $(this).after(tmp).remove(); });

o DOM puro

function replaceElm(oldTagName, newTagName, targetElm) { var target = targetElm || window.document; var allFound = target.getElementsByTagName(oldTagName); for (var i=0; i<allFound.length; i++) { var tmp = document.createElement(newTagName); for (var k=0; k<allFound[i].attributes.length; k++) { var name = allFound[i].attributes[k].name; var val = allFound[i].attributes[k].value; tmp.setAttribute(name,val); } tmp.innerHTML = allFound[i].innerHTML; allFound[i].parentNode.insertBefore(tmp, allFound[i]); allFound[i].parentNode.removeChild(allFound[i]); } } replaceElm(''td'',''th'',document.getElementsByTagName(''table'')[0]);

DOM siempre es más rápido: http://jsperf.com/replace-tag-names


document.body.innerHTML=document.body.innerHTML.replace(/(/<td/>)|(/<td/s)|(/<//td/>)/gi,function(x){return x.replace("td","th");})