今天做了两个小练习,还是记录一下吧
1、点击按钮生成一个按钮,点击新按钮,又生成一个按钮,同时原来的按钮失效;效果图
HTML部分久只创建了一个input,也没有用CSS样式
1 <!--产生按钮--> 2 <input type="button" id="button1" value="按钮源" οnclick="Onclick()"/>
运用JS创建按钮,本来是想用removeAttribute移除属性,但只有按钮源失去了产生按钮的功能,所以投机取巧,设置setAttribute("disabled",'disabled')将点击过得按钮禁用,达到失去产生按钮的功能;
今天看视频的发现可以设置点击时间为NULL,所以更新一下,效果图:
这样就可以达到预先设想的效果了
1 var j=0; 2 function Onclick(){ 3 j++; 4 var body=document.getElementsByTagName('body').item(0); 5 var buttonNum=document.createElement('input'); 6 body.appendChild(buttonNum); 7 buttonNum.οnclick=Onclick;//获得点击事件 8 buttonNum.setAttribute('type','button');//添加属性 9 buttonNum.style.marginLeft='5px' 10 buttonNum.value='按钮'+j; 11 //document.getElementsByTagName('input').item(j-1).removeAttribute("onclick");//移除属性 12 //document.getElementsByTagName('input').item(j-1).setAttribute("disabled",'disabled');//禁用
document.getElementsByTagName('input').item(j-1).οnclick=null;//设置点击时间为NULL
13 }
2、输入行数、列数,点击按钮生成表格(第一次接触insertRow();insertCell())
同样也没有CSS样式,可以通过JS添加
1 <lable>输入行数:</lable><input type="text" name="" id="" value="" /><br /> 2 <lable>输入列数:</lable><input type="text" name="" id="" value="" /><br /> 3 <button οnclick="creTable()">产生表格</button><br />
1 function creTable(){ 2 var body=document.getElementsByTagName('body').item(0); 3 var col=document.getElementsByTagName('input').item(0).value; 4 var row=document.getElementsByTagName('input').item(1).value; 5 var Table=document.createElement('table'); 6 body.appendChild(Table); 7 Table.id='mytable'; 8 Table.border=2; 9 Table.style.width='400px'; 10 Table.style.height='100px'; 11 for (var j=0;j<col;j++) { 12 var Tr=Table.insertRow(j);//Table.insertRow()向Table中插入一行,j为表中的行数,新行插入表尾; 13 for (var i=0;i<row;i++) { 14 var Td=Tr.insertCell(i);//Tr.insertCell()向tr中插入单元格,i为表中的列数;trObject.insertCell(index),把它插入行中指定的位置。 15 Td.innerHTML='date'; //新单元格将被插入当前位于 index 指定行的单元格之前。如果 index 等于行中的单元格数,则新单元格被附加在行的末尾。 16 Td.style.backgroundColor='red' 17 } 18 } 19 }
需要注意的是产生的单元格Td要依赖于Tr,写的时候没注意,将Td依赖于Table了,弄了好久没有出现效果,,一直提示insertCell(i)不是函数,后来才发现是这个原因;
效果图: