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

本是古典何须时尚 2022-06-16 08:28 201阅读 0赞

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

1、点击按钮生成一个按钮，点击新按钮，又生成一个按钮，同时原来的按钮失效；效果图![1108068-20170413183107517-1853353225.png][]

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

1 
    2         <input type="button" id="button1" value="按钮源" onclick="Onclick()"/>

运用JS创建按钮，本来是想用removeAttribute移除属性，但只有按钮源失去了产生按钮的功能，所以投机取巧，设置setAttribute("disabled",'disabled')将点击过得按钮禁用，达到失去产生按钮的功能；

今天看视频的发现可以设置点击时间为NULL，所以更新一下，效果图：![1108068-20170416215154087-1286391905.png][]

这样就可以达到预先设想的效果了

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

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 />

![复制代码][copycode.gif]

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 }

![复制代码][copycode.gif]

需要注意的是产生的单元格Td要依赖于Tr，写的时候没注意，将Td依赖于Table了，弄了好久没有出现效果，，一直提示insertCell(i)不是函数，后来才发现是这个原因；

效果图：![1108068-20170413185329470-719329179.png][]

[1108068-20170413183107517-1853353225.png]: /images/20220616/7423ee90c85143bd91a0578b45f2d4d0.png
[1108068-20170416215154087-1286391905.png]: /images/20220616/2f3801bb54a147bba6fcc3af0c3a2438.png
[copycode.gif]: /images/20220616/9800c787ad554cfabfe45da7f164b93c.png
[1108068-20170413185329470-719329179.png]: /images/20220616/722c23b6a01240b086275e6df4b142e0.png