功能概述：实现页面加载时自动改变表格中指定文字的样式，以及通过按钮的点击实现手动改变样式
<body>
<div class="all">
<table class="show" height="100" border="1" cellspacing="0">
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>内容</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>女</td>
<td>该故事纯属虚构，如有雷同纯属巧合</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
<td>继母毒打女儿，网友拍下视频！女孩遭拖鞋打脸，连连求饶“我错了”</td>
</tr>
</table>
<input type="text" value="该故事" class="replace" />
<button type="button" class="change">改变内容字体颜色</button>
</div>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
var table = $(".show");//table对象
var replace = $(".replace").val();//要改变颜色的文字
//页面加载时自动改变样式
table.each(function() {
var word = $(this).html();
word = word.replace(replace,
"<span style='color:red;font-weight: bold;'>" + replace
+ "</span>");
$(this).html(word);
});
//通过点击按钮实现手动改变样式
var word = table.html();
$(".change").click(
function() {
word = word.replace(replace,
"<span style='color:green;font-weight: bold;'>"
+ replace + "</span>");
table.html(word);
});
});
</script>
</body>