小弟我想在网页中实现这样的效查，点“单词N"被点击的内容就变加粗加红，要如何做

我想在网页中实现这样的效查，点“单词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>

小弟我想在网页中实现这样的效查，点“单词N"被点击的内容就变加粗加红，要如何做

相关推荐