点击按钮生成新的按钮表格，同时之前的按钮失去功能

Posted 2020-09-17 谢维开

今天做了两个小练习，还是记录一下吧

1、点击按钮生成一个按钮，点击新按钮，又生成一个按钮，同时原来的按钮失效；效果图

html部分久只创建了一个input，也没有用CSS样式

1 <!--产生按钮-->
2         <input type="button" id="button1" value="按钮源" 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=\'按钮\'+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).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)不是函数，后来才发现是这个原因；

效果图：