JavaScript实现：点击表，文本框中内容变化的功能
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>测试</title> 6 7 </head> 8 <body> 9 <div> 10 <!--变化的地方--> 11 <textarea id="first"></textarea> 12 <textarea id="second"></textarea> 13 <textarea id="third"></textarea> 14 </div> 15 16 <p id="form"></p> 17 <script> 18 //列表 19 var arr = [ 20 { "name":"菜鸟教程" , "url":"www.runoob.com" }, 21 { "name":"google" , "url":"www.google.com" }, 22 { "name":"微博" , "url":"www.weibo.com" } 23 ]; 24 25 var str = ""; 26 str += '<table border="1">'; 27 str += '<tr><th>number</th><th>中文名</th><th>网址</th></tr>' 28 29 for (x in arr) 30 { 31 //就是str需要写好 32 str += "<tr><td onclick='change(" + x + ")'>" + x + "</td>"; 33 for (y in arr[x]) 34 { 35 str += "<td>" + arr[x][y] + "</td>"; 36 } 37 str += "</tr>"; 38 } 39 40 document.getElementById("form").innerHTML=str; 41 42 //点击调用的函数 43 function change(x) 44 { 45 document.getElementById("first").innerHTML=x; 46 document.getElementById("second").innerHTML=arr[x]["name"]; 47 document.getElementById("third").innerHTML=arr[x].url; 48 } 49 </script> 50 </body> 51 </html>
