首页 > 代码库 > 点击按钮生成新的按钮、表格，同时之前的按钮失去功能
点击按钮生成新的按钮、表格，同时之前的按钮失去功能
今天做了两个小练习，还是记录一下吧
1、点击按钮生成一个按钮，点击新按钮，又生成一个按钮，同时原来的按钮失效；效果图
HTML部分久只创建了一个input，也没有用CSS样式
1 <!--产生按钮--> 2 <input type="button" id="button1" value="http://www.mamicode.com/按钮源" onclick="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.onclick=Onclick;//获得点击事件
8 buttonNum.setAttribute(‘type‘,‘button‘);//添加属性
9 buttonNum.style.marginLeft=‘5px‘
10 buttonNum.value=http://www.mamicode.com/‘按钮‘+j;"onclick");//移除属性
12 //document.getElementsByTagName(‘input‘).item(j-1).setAttribute("disabled",‘disabled‘);//禁用
document.getElementsByTagName(‘input‘).item(j-1).onclick=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 onclick="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)不是函数，后来才发现是这个原因；
效果图：
点击按钮生成新的按钮、表格，同时之前的按钮失去功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。