javascript/jquery extract Html-text from HTML table containing input tags

Question

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.

artlung · Accepted Answer · 2009-06-23 15:58:22Z

6

To 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.com/

edited Jun 23, 2009 at 15:58

answered Jun 23, 2009 at 15:51

artlung

33.5k19 gold badges76 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Colin Brock Over a year ago

I didn't type fast enough. Good answer.

artlung Over a year ago

It was a fun one, but I forgot my semicolons and had to edit.

wicherqm · Accepted Answer · 2009-06-23 19:15:19Z

Thank you @artlung

Based on your sample i prepared complete 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.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>

Collectives™ on Stack Overflow

javascript/jquery extract Html-text from HTML table containing input tags

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related