2009-06-23 8 views
0

J'ai un gros problème. Je veux extraire le texte de la table html qui contient des étiquettes d'entrée, le texte brut, les étiquettes de lien etc. et montre dans une nouvelle fenêtre nettoyer la table de HTML avec seulement le texte.javascript/jquery extrait Html-texte du tableau HTML contenant des balises d'entrée

EXEMPLE D'ENTRÉE

<TABLE id="test"> 
<TBODY> 
<TR> 
<TD>TEXT 1</TD> 
<TD><a href="/questions">TEXT 2</a></TD> 
<TD><input type="text" value="TEXT 3" ></TD> 
</TR> 
</TBODY> 
</TABLE> 

choses magiques (script) se (parse) ici (this)

SORTIE

<TABLE id="test"> 
<TBODY> 
<TR> 
<TD>TEXT 1</TD> 
<TD>TEXT 2</TD> 
<TD>TEXT 3</TD> 
</TR> 
</TBODY> 
</TABLE> 

J'ai cherché un peu partout et je ne peux pas le faire fonctionner. J'ai besoin de cette fonctionnalité pour copier coller.

Toute aide.

Répondre

1

Merci @artlung

Sur la base de votre échantillon i préparé une solution complète (copier coller au format html fichier)

Et je vous demande d'examiner cela, peut-être que cela peut être fait parier ter?

problème complet:

1.Transform tableau HTML avec des entrées, ancre, texte à la nouvelle table propre avec Html seul texte

2.Créez nouvelle fenêtre et transfert préparé Tableau

SOLUTION :

<html> 
<head> 
<title>TEST HTML table with inputs , anchor to text </title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var tmp = ''; 

$('table tbody tr').each(function() { //iterate tr 
tmp += '<tr>'; 
$(this).find('td').each(function() { //iterate td 
    tmp += '<td>'; 
    tmp += $(this).text(); 
    $(this).find('input').each(function() { 
      tmp += $(this).val() ; 
     tmp += '</td>'; 
    }); 
}); 
tmp += '</tr>'; 
}); 


$("#demo_button").click(function(e) { 
myWindow=window.open('','MyNewWindow','width=500,height=300,left=200,top=100'); 
myWindow.document.write('<html><head><title>CTRL+C to copy</title></head><body><table><tbody>' + tmp + '</tbody></table></body></html>'); 
myWindow.document.close(); 
myWindow.focus(); 
}); 

}); 
</script> 
</head> 
<body> 
<div> 
<input type="button" id="demo_button" value="Click Me to open window with clean HTML TABLE prepared for copy"/> 

<br/>This is HTML TABLE: 
<TABLE id="test"> 
<TBODY> 
<TR> <TD><b>TEXT 1</b></TD> <TD><a href="#">TEXT 2</a></TD> <TD><input type="text" value="TEXT 3" ></TD> </TR> 
<TR> <TD><span>TEXT 1.1</span></TD> <TD><a href="#">TEXT 2.1</a></TD> <TD><input type="text" value="TEXT 3.1" ></TD> </TR> 
</TBODY> 
</TABLE> 

</div> 
</body> 
</html> 
6

Pour extraire uniquement le texte de quelque chose, utilisez la méthode .text(). Pour obtenir la valeur d'une entrée, utilisez la méthode .val(). Donc, nous devons faire une boucle sur chaque cellule <TD>, et dans chacun de ceux-ci, s'il y a une entrée, extraire la valeur. Nous les assemblons et les remettons dans la cellule en utilisant la méthode .html().

Voici le code:

$(document).ready(function(){ 
    var tmp = ''; 
    $('table tbody tr td').each(function() { 
     tmp = $(this).text(); 
     $(this).find('input').each(function() { 
       tmp += $(this).val(); 
     }); 
     $(this).html(tmp); 
    }); 
}); 

Pour en savoir plus sur les méthodes de jQuery, voir http://api.jquery.com/

+1

Je n'ai pas tapé assez vite. Bonne réponse. –

+0

+1 C'est une bonne réponse, et très rapide en effet. – karim79

+0

C'était amusant, mais j'ai oublié mes points-virgules et j'ai dû modifier. – artlung

Questions connexes