I have a big problem. I want to extract text from html table that contains input tags, raw text, link tags etc. and display in a new window clean html table with only text.
SAMPLE INPUT
<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>
magic things(script) happen(parse) here(this)
OUTPUT
<TABLE id="test">
<TBODY>
<TR>
<TD>TEXT 1</TD>
<TD>TEXT 2</TD>
<TD>TEXT 3</TD>
</TR>
</TBODY>
</TABLE>
I searched almost everywhere and i cannot get it to work. I need this functionality for copy paste.
Any Help.
I have a big problem. I want to extract text from html table that contains input tags, raw text, link tags etc. and display in a new window clean html table with only text.
SAMPLE INPUT
<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>
magic things(script) happen(parse) here(this)
OUTPUT
<TABLE id="test">
<TBODY>
<TR>
<TD>TEXT 1</TD>
<TD>TEXT 2</TD>
<TD>TEXT 3</TD>
</TR>
</TBODY>
</TABLE>
I searched almost everywhere and i cannot get it to work. I need this functionality for copy paste.
Any Help.
Share Improve this question edited Feb 8, 2012 at 8:42 Aman Aggarwal 4,0154 gold badges28 silver badges39 bronze badges asked Jun 23, 2009 at 15:42 wicherqmwicherqm2 Answers
Reset to default 6To extract just the text from something, use the .text() method. To get the value of an input, use the .val() method.
So, we need to loop over each <TD> cell, and within each of those, if there's an input, get the value out. We splice them together and put that back into the cell using the .html() method.
Here's the 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);
});
});
To learn more about jQuery's methods, see http://api.jquery./
Thank you @artlung
Based on your sample i prepared plete solution (copy paste to html file)
And im asking for reviewing this, maybe it can be done better?
Complete problem:
1.Transform HTML table with inputs,anchor, text to new CLEAN Html table with only text
2.Create new window and transfer prepared Table
SOLUTION:
<html>
<head>
<title>TEST HTML table with inputs , anchor to text </title>
<script src="http://ajax.googleapis./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>