[英]javascript/jquery extract Html-text from HTML table containing input tags
我有一个大问题。 我想从包含输入标记,原始文本,链接标记等的html表中提取文本,并在新窗口中显示仅包含文本的html表。
样品输入
<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>
神奇的事情(脚本)在这里发生(解析)
输出值
<TABLE id="test">
<TBODY>
<TR>
<TD>TEXT 1</TD>
<TD>TEXT 2</TD>
<TD>TEXT 3</TD>
</TR>
</TBODY>
</TABLE>
我搜索了几乎所有地方,但无法正常工作。 我需要此功能来进行复制粘贴。
任何帮助。
要仅从某些内容中提取文本,请使用.text()
方法。 要获取输入的值,请使用.val()
方法。
因此,我们需要遍历每个<TD>
单元,并且在每个单元中,如果有输入,则将值取出。 我们将它们拼接在一起,然后使用.html()
方法将其放回到单元格中。
这是代码:
$(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);
});
});
要了解有关jQuery方法的更多信息,请参见http://api.jquery.com/
谢谢@artlung
根据您的样品,我准备了完整的解决方案(将粘贴复制到html文件)
我要求对此进行审查,也许可以做得更好?
完整问题:
1.将带有输入,锚点,文本的HTML表转换为仅包含文本的新CLEAN Html表
2.创建新窗口并转移准备好的表
解:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.