好程序员web前端教程分享前端javascript练习题二

字节探索
• 阅读 114

  好程序员web前端教程分享前端 javascript 练习题二,创建表格,添加删除操作
介绍:这是用基本的方式,更便捷的方法是,使用es6提供的模板字符串,代码和效率能提高很多
简单的样式:
a <input type="text"/>
b <input type="text"/>
c <input type="text"/><input type="button" value="添加"/><table></table>
js实现代码:
var oinput=document.getElementsByTagName("input");var otable=document.getElementsByTagName("table")[0];
oinput[oinput.length-1].onclick=function(){

var otr=document.createElement("tr");
//创建单元格,并且将文本的值加到单元格里
for(var i=0;i<oinput.length-1;i++){
    var otd=document.createElement("td");
    otd.innerHTML=oinput[i].value;
    otr.appendChild(otd);
}
//添加删除按钮,并加入到单元格中
var otd = document.createElement("td");
    var oSpan = document.createElement("span");
    oSpan.innerHTML = "删除";
    otd.appendChild(oSpan);
    otr.appendChild(otd);
    oSpan.onclick = function(){
        //oTable.removeChild(oTr);
        otable.removeChild(this.parentNode.parentNode);
    }
otable.appendChild(otr);}

进度条
html排版样式:
<div class="progressBar">

<p style=""></p></div><div class="progressBar">
<p></p></div><div class="progressBar">
<p></p></div>

js执行代码:
var opp=document.getElementsByTagName("p");function progress(obj,num){

var count=0;
var timer=setInterval(function(){
    count++;
    obj.style.width=count+"%";
    if(count==num){
        clearInterval(timer);
    }
},20)}progress(opp[0],50);progress(opp[1],60);progress(opp[2],80);
点赞
收藏
评论区
推荐文章
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
小嫌 小嫌
3年前
大佬的搬运工
JS大佬学习笔记很有用niubi的博客各种代码的在线学习教程,是一个很好用的学习代码网站这位大佬对js进行了非常牛逼的总结,其中包括了面试经验,专题,深入,ES6,很强阿里巴巴前端开发学习路线现代JavaScript教程浙江大学师姐前端总结,超强!项目实战react实战项目合集前端线上学习编译器
Souleigh ✨ Souleigh ✨
4年前
昨天写了这些骚代码,今天上班差点被同事揍了
昨天写了这些骚代码,今天上班差点被同事揍了前端开发微信号qianduan1024功能介绍专注于Web前端技术文章分享,包含JavaScript、HTML5、CSS3等前端基础知识,以及Vue.js,React,Augular等前端框架收录于话题来自:掘金,作者:布拉德特皮链接:h
可莉 可莉
3年前
20155211 网络攻防技术 Exp08 Web基础
20155211网络攻防技术Exp08Web基础实践内容1.Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt,理解JavaScript的基本功能,理解DOM。
可莉 可莉
3年前
11个棘手的JavaScript面试题
英文| https://medium.com/javascriptinplainenglish/doyouknowjavascript1f2b44461333翻译|web前端开发(ID:web\_qdkf)在本文中,将分享11个Javascript技巧面试问。这些题看起来很简单,但对答案却要三思而后行,因为它很容易做错。1
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
20155211 网络攻防技术 Exp08 Web基础
20155211网络攻防技术Exp08Web基础实践内容1.Web前端HTML,能正常安装、启停Apache。理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML。2.Web前端javascipt,理解JavaScript的基本功能,理解DOM。
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
字节探索
字节探索
Lv1
千里黄云白日曛,北风吹雁雪纷纷。
文章
4
粉丝
0
获赞
0