js如何实现动态显示表格数据（点奇数显示奇数单元格内容）
一、总结
一句话总结：
1、动态指定表格中每个单元格的id，然后通过id可以获取每个单元格，然后对里面的innerHTML进行赋值。
2、弄了一个数组，先把要赋值给单元格的innerHTML的数据存到数组里面，然后从数组里面批量赋值给单元格的innerHTML。
3、写了一个便于通过id获取元素element的函数。
1、html标签可以通过各种属性值来传参么？
解答：可以，html标签可以通过各种属性（例如id，value等）来传参，或者是区别不同元素，因为属性可以动态添加啊。
2、html如何动态指定元素的id属性（除了常规方法）？
解答：通过父亲的innerHTML属性，标签的那个语句加个id属性倒是很容易的。 str_tab+='<td id='+"td"+(i*5+j+1)+' >'+'</td>'
3、js中创建数组的两种方法？
解答：Array()对象和[]。var arr=new Array(); var arr=[]等效上句
4、js自定义的通过id获取element的函数怎么写？
解答：function $(x){ return document.getElementById(x); } 。
5、html中的标签中的事件（比如点击事件）调用的函数如何传参？
解答：直接将参数写进函数即可，比如整形和字符串，字符串加引号，单双引号都行。onclick="td_num('odd')"。function td_num(x){}
二、js如何实现动态显示表格数据
1、动态改变表格数据显示案例描述
- 实例描述：
根据用户的选择表格中显示不同的数据
2、截图
3、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<style type="text/css">
</style>
</head>
<body>
<h3>动态显示表格数据</h3>
<table style="width: 300px;height: 300px;border: 3px solid green;text-align: center;">
<script>
for(var i=0;i<5;i++){
str_tab='<tr>'
for(var j=0;j<5;j++){
str_tab+='<td id='+"td"+(i*5+j+1)+' style="background: orange;">'+'</td>'
}
str_tab+='</tr>'
document.write(str_tab)
}
</script>
</table>
<input type="button" value="奇数" onclick="td_num('odd')">
<input type="button" value="偶数" onclick="td_num('even')">
<input type="button" value="全部" onclick="td_num('all')">
<script type="text/javascript">
var arr=new Array();
// var arr=[]等效上句
function $(x){
return document.getElementById(x);
}
for(var i=0;i<25;i++){
arr[i]=i+1;
}
// alert(arr)
function write(){
for(var i=0;i<25;i++){
$("td"+(i+)).innerHTML=arr[i]
}
}
function td_num(x){
switch (x){
case 'odd':
for(var i=0;i<25;i++){
if(i%2==0){
arr[i]=i+1;
}else{arr[i]=""}
}
break;
case 'even':
for(var i=0;i<25;i++){
if(i%2==1){
arr[i]=i+1;
}else{arr[i]=""}
}
break;
case 'all':
for(var i=0;i<25;i++){
arr[i]=i+1;
}
break;
}
write()
}
</script>
</body>
</html>
三、测试题-简答题
1、html标签可以通过各种属性值来传参么？
解答：可以，html标签可以通过各种属性（例如id，value等）来传参，或者是区别不同元素，因为属性可以动态添加啊。
2、html如何动态指定元素的id属性（除了常规方法）？
解答：通过父亲的innerHTML属性，标签的那个语句加个id属性倒是很容易的。 str_tab+='<td id='+"td"+(i*5+j+1)+' >'+'</td>'
3、js中创建数组的两种方法？
解答：Array()对象和[]。var arr=new Array(); var arr=[]等效上句
4、js自定义的通过id获取element的函数怎么写？
解答：function $(x){ return document.getElementById(x); } 。
5、html中的标签中的事件（比如点击事件）调用的函数如何传参？
解答：直接将参数写进函数即可，比如整形和字符串，字符串加引号，单双引号都行。onclick="td_num('odd')"。function td_num(x){}