码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-05-10 21:18:18      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:disable   rem   blog   .com   images   需要   复制   alt   style   

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

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)不是函数,后来才发现是这个原因;

效果图:技术分享

 

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

标签:disable   rem   blog   .com   images   需要   复制   alt   style   

原文地址:http://www.cnblogs.com/xieweikai/p/6837936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!