我想在网页中实现这样的效查，点“单词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代码？
[解决办法]
这个后台处理啊，关键词加红加粗输出
[解决办法]
- 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>