javaScript 为元素动态添加事件-js学习笔记备忘

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 style="text-align:center;">动态显示表格数据</h1>
<script type="text/javascript">
var tab=document.createElement('table');

tab.style.border='3px solid green'

tab.width=300;
tab.height=300;
tab.border.solid='green';
for (var i = 0; i < 5; i++) {
tab.insertRow(i);
for (var j = 0; j < 5; j++) {
tab.rows[i].insertCell(j);
tab.rows[i].cells[j].style.background='orange';
tab.rows[i].cells[j].height=50;
tab.rows[i].cells[j].id='td'+(i+j+1);
}
}
document.body.appendChild(tab);
var btn1=document.createElement('input');
btn1.type='button';
btn1.value='奇数';
btn1.onclick=function() {td_num('odd')};

var btn2=document.createElement('input');
btn2.type='button';
btn2.value='偶数';
btn2.style.textAlign='center'
btn2.onclick=function() { td_num('even') };

var btn3=document.createElement('input');
btn3.type='button';
btn3.value='全部';
btn3.onclick=td_num1//不带参数 //function() { td_num('all') };


document.body.appendChild(btn1);
document.body.appendChild(btn2);
document.body.appendChild(btn3);

var ba=document.getElementsByTagName('input');

for (var i = 0; i < ba.length; i++) {
ba[i].style.margin='10px';
}

function td_num(x){
console.log('带参数 '+x);
}

function td_num1(){
console.log('不带参数');
}

</script>

</body>
</html>

posted @ 2016-09-26 19:19  编程-一生坚持的事业  阅读(159)  评论(0)    收藏  举报