ansaurus

Question

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

Answer 1

+5 A:

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/

artlung 2009-06-23 15:51:47

I didn't type fast enough. Good answer.

Colin 2009-06-23 15:54:26

+1 That is a good answer, and very quick indeed.

karim79 2009-06-23 15:55:16

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

artlung 2009-06-23 15:59:06

Answer 2

+1 A:

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>

2009-06-23 19:15:19

ansaurus

tags:

views:

answers:

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

related questions