javascript / jquery从包含输入标签的HTML表中提取HTML文本

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. 我想从包含输入标记，原始文本，链接标记等的html表中提取文本，并在新窗口中显示仅包含文本的html表。

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. 任何帮助。

Answer 1

To extract just the text from something, use the .text() method. 要仅从某些内容中提取文本，请使用.text()方法。 To get the value of an input, use the .val() method. 要获取输入的值，请使用.val()方法。

So, we need to loop over each <TD> cell, and within each of those, if there's an input, get the value out. 因此，我们需要遍历每个<TD>单元，并且在每个单元中，如果有输入，则将值取出。 We splice them together and put that back into the cell using the .html() method. 我们将它们拼接在一起，然后使用.html()方法将其放回到单元格中。

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/ 要了解有关jQuery方法的更多信息，请参见http://api.jquery.com/

Answer 2

Thank you @artlung 谢谢@artlung

Based on your sample i prepared complete solution (copy paste to html file) 根据您的样品，我准备了完整的解决方案（将粘贴复制到html文件）

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 1.将带有输入，锚点，文本的HTML表转换为仅包含文本的新CLEAN Html表

2.Create new window and transfer prepared Table 2.创建新窗口并转移准备好的表

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>

javascript / jquery从包含输入标签的HTML表中提取HTML文本

问题描述

2 个解决方案

解决方案1
6 2009-06-23 15:51:47

解决方案2
1 已采纳

javascript / jquery从包含输入标签的HTML表中提取HTML文本

问题描述

2 个解决方案

解决方案1 6 2009-06-23 15:51:47

解决方案2 1 已采纳

解决方案1
6 2009-06-23 15:51:47

解决方案2
1 已采纳