小弟我想在网页中实现这样的效查，点“单词N"被点击的内容就变加粗加红，要如何做
日期：2014-05-16 浏览次数：20367 次
我想在网页中实现这样的效查，点“单词N"，被点击的内容就变加粗加红，要怎么做？
一个表格：<table><tr><td>单词1</td><td>单词2</td><td>单词3</td><td>单词4</td></tr></table>
我想在网页中实现这样的效查，点“单词N"，被点击的内容就变加粗加红，要怎么做？
http://www.dnssjy.com/english/student.aspx
比如上面这个链接中的 abandon， 我点了它以后，想让它变成一段HMTL代码修饰后的效果，或者替换成别一段HTML代码？
------解决方案--------------------
这个后台处理啊，关键词加红加粗输出
------解决方案--------------------
一个表格：<table><tr><td>单词1</td><td>单词2</td><td>单词3</td><td>单词4</td></tr></table>
我想在网页中实现这样的效查，点“单词N"，被点击的内容就变加粗加红，要怎么做？
http://www.dnssjy.com/english/student.aspx
比如上面这个链接中的 abandon， 我点了它以后，想让它变成一段HMTL代码修饰后的效果，或者替换成别一段HTML代码？
------解决方案--------------------
这个后台处理啊，关键词加红加粗输出
------解决方案--------------------
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
var obj = document.getElementById('demo').getElementsByTagName('td');
for (var i = 0; i < obj.length; i ++) {
obj[i].onclick = function() {
for (var j = 0; j < obj.length; j ++) {
obj[j].style.color = '#000';
obj[j].style.fontWeight = 'normal';
}
this.style.color = 'red';
this.style.fontWeight = 'bold';
}
}
}
</script>
</head>
<body>
<table width="500" border="1" id="demo">
<tr>
<td>单词1</td>
<td>单词2</td>
<td>单词3</td>
<td>单词4</td>
<td>单词5</td>
</tr>
</table>
</body>
</html>
------解决方案--------------------
<script type="text/javascript">
function init(){
var tds=document.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].onclick=change;
}
}
function change(){
this.innerHTML="<font color=red face=Arial, Helvetica, sans-serif>"+this.innerHTML+"</font>";
}
window.onload=init;
</script>
</head>
<body>
<table>
<tr>
<td>单词1</td>
<td>单词2</td>
<td>单词3</td>
<td>单词4</td>
</tr>
</table>
------解决方案--------------------
正则替换就可以了
table.innerHTML=table.innerHTML.replace(/单词1/ig,'<b>单词1</b>')
------解决方案--------------------
- HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
window.onload = function() {
document.getElementById('demo').onclick = function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName !== 'TD') {
return;
}
target.style.color = 'red';
target.style.fontWeight = 'bold';
if(typeof e.preventDefault === 'function') {
e.preventDefault();
e.stopPropagation();
}else {
e.returnValue = false;
e.cancelBubble = true;
}
}
}
</script>
</HEAD>
<BODY>
<table width="500" border="1" id="demo">
<tr>
<td>单词1</td>
<td>单词2</td>
<td>单词3</td>
<td>单词4</td>
<td>单词5</td>
</tr>
</table>
</BODY>
</HTML>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
