5.网页中增加新的内容

使用target.innerHTML="new content";动态改变网页内容。

例如，动态添加成员信息。

下面是表格动态添加成员的例子

html

<table id="personinfo"><thead><tr><th>Name</th><th>Email</th><th>Salary</th><th></th></tr></thead><tbody><tr><td>hello</td><td>hello</td><td>hello</td><td><input type="button" value="删除" name="remove"></td></tr><tr><td>world</td><td>world</td><td>world</td><td><input type="button" value="删除" name="remove"></td></tr></tbody>
</table><div class="newper"><div>添加新的员工</div><div id="name"><span>name: </span><input type="text" name="in-name"></div><div id="email"><span>email: </span><input type="text" name="in-email"></div><div id="salary"><span>salary:</span><input type="text" name="in-salary"></div><input type="button" value="添加" id="btnadd">
</div>

css

 table{border: 1px solid black;margin: 50px auto;border-collapse: collapse;
}
table th,
table td{border: 1px solid black;text-align: center;padding: 2px 3px;
}.newper{margin: 0 auto;border: 1px solid black;width: 240px;padding: 10px;text-align: center;
}

JavaScript

 function myClickByID( id , fun ){var btn=document.getElementById(id);btn.onclick=fun;
}window.onload=function () {myClickByID("btnadd",function () {var name=document.getElementsByName("in-name")[0];var email=document.getElementsByName("in-email")[0];var salary=document.getElementsByName("in-salary")[0];var tr=document.createElement("tr");//可以在标签中间使用变量tr.innerHTML="<td>"+name.value+"</td>\n"+"<td>"+email.value+"</td>\n"+"<td>"+salary.value+"</td>\n"+"<td><input type=\"button\" value=\"删除\" name=\"remove\"></td> ";var person=document.getElementById("personinfo");// console.log();person.children[1].appendChild(tr);remove=document.getElementsByName("remove");for (var i=0;i<remove.length;++i){remove[i].onclick=function () {if (confirm("确定删除吗？")==true)this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}}});var remove=document.getElementsByName("remove");for (var i=0;i<remove.length;++i){remove[i].onclick=function () {// console.log(this.parentNode.parentNode);if (confirm("确定删除吗？")==true)this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);}}}

结果

原始

效果

代码

添加一个新的成员

效果

代码

在没有改变tbody的其他的内容前提下，实现网页内容的动态添加，效率较高。

5.网页中增加新的内容相关推荐

linux如何右键新建文件夹,在Ubuntu 18.04右键菜单中增加新文档(New Document)及其他类型选项...
本文教你在Ubuntu 18.04操作系统下使用命令操作在右键菜单中增加"新文档(New Document)"选项,包括为不同文件类型增加右键菜单选项的方法.起因是当我尝试创建一个 ...
Android WebView获取网页中JavaScript弹框内容
Android WebView获取网页中JavaScript弹框内容网页中弹窗的js代码为 <script type="text/javascript" language= ...
AOSP6.0.1 系统中增加新的category类型与app绑定，并在hotseat容器中加载app
在launcher3(桌面程序)的hotseat中,可以通过修改dw_phone_hotseat.xml在指定位置加载指定app(仅限于已经指定category类型为APP_xxxx的app或者是系统 ...
在ECSHOP后台左侧导航中增加新菜单
在ECSHOP后台左侧导航中增加新菜单 ECSHOP教程 / ecshop 教程网(www.ecshop119.com) 2011-11-08 有个别高级用户(懂PHP的),提到这样的问题: 在后台管 ...
如何查看网页中的密码星号内容
如何查看网页中的密码星号内容 web decode 密码查看星号查看目标: 步骤: 目标: 最近帮助客户重新配置它的路由器,但是它也忘记了拨号密码是多少,在页面上也全是星号,所以想怎么能查看页面里 ...
SMLT中增加新的语言
1.SMLT,增加新的语言,如果提示NLS错误 ->2 2.se38中执行RSCPINST,在NLS中增加新的语言 3.选中语言,选择菜单 import language 4.输入补丁文件路径, ...
操原上机（一）在Linux系统中增加新的系统调用
在LINUX中增加新的系统调用编写新的系统调用函数(指函数实现部分) 注册新的系统调用(声明系统调用函数和编号) 编译新LINUX内核编译和安装模块启动新的LINUX内核编写应用程序测试新的系 ...
如何打印网页中的某部分内容
一般情况下打印是使用 window.print();函数直接打印整页,但如果需要打印网页中定义的部分内容,则可使用如下的方法,具体方法如下: 1.在页面的代码头部处加入JavaScript: < ...
[自用]js 打印网页中指定的部分内容和范围
打印网页中定义的部分内容的实现方法正常情况下的打印是使用 window.print();直接整页打印,但如果需要打印网页中定义的部分内容,则可使用如下的方法: 1.在页面的代码头部处加入JavaSc ...
日常使用技巧--复制网页中禁止复制的内容
目录一.前言二.具体操作 1.寻找目标网页 2.解决-1 3.解决-2 4.测试-1 4.测试-2 三.总结一.前言在平时工作生活中,难以避免进行文档的撰写,除了发挥我们自己的创造才智,免不得 ...

5.网页中增加新的内容

html

css

JavaScript

结果

5.网页中增加新的内容相关推荐

最新文章

热门文章