在html中编写动态新增的代码,通过JS代码在网页中动态添加Script脚本

【实例名称】

通过JS代码在网页中动态添加Script脚本

【实例描述】

Script脚本可以在页面中静态地设置好,也可以使用“src”属性调用页面外部的脚本文件,本例JS代码我们来学习一个方法,可以在页面运行过程中,动态添加Script脚本。

【实例代码】

标题页

o=document.createElement("script");         //动态创建script元素

o.text="alert('test!')";                    //输出语句。。是脚本中的代码

document.documentElement.childNodes[0].appendChild(o);//将脚本添加到页面中

【难点剖析】

本例JS代码使用“createElement”方法,创建了一个“script”元素,并设置元素的内容为“atert('test!')”,最后使用“appendChild”方法,将此元素添加到窗体中。

【源码下载】

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您提供相关的代码示例。首先,请确保在HTML文档正确引入jQuery和JavaScript脚本,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态生成表格</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <table id="myTable"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>18</td> <td><button class="edit">编辑</button><button class="delete">删除</button></td> </tr> <tr> <td>2</td> <td>李四</td> <td>20</td> <td><button class="edit">编辑</button><button class="delete">删除</button></td> </tr> </tbody> </table> <button id="addRow">添加一行</button> </body> </html> ``` 其,`<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>`是引入jQuery库的代码,`<script src="script.js"></script>`是引入JavaScript脚本代码,`<table id="myTable">`是我们要动态生成的表格的标签。 接下来,我们来看一下`script.js`文件的代码: ```javascript $(document).ready(function() { // 编辑按钮的点击事件 $(document).on("click", ".edit", function() { var row = $(this).closest("tr"); var id = row.find("td:eq(0)").text(); var name = row.find("td:eq(1)").text(); var age = row.find("td:eq(2)").text(); var new_name = prompt("请输入姓名", name); var new_age = prompt("请输入年龄", age); if (new_name != null && new_age != null) { row.find("td:eq(1)").text(new_name); row.find("td:eq(2)").text(new_age); } }); // 删除按钮的点击事件 $(document).on("click", ".delete", function() { $(this).closest("tr").remove(); }); // 添加一行按钮的点击事件 $("#addRow").click(function() { var id = $("#myTable tbody tr:last-child td:first-child").text(); if (id == "") { id = 1; } else { id = parseInt(id) + 1; } var name = prompt("请输入姓名", ""); var age = prompt("请输入年龄", ""); if (name != null && age != null) { var newRow = "<tr><td>" + id + "</td><td>" + name + "</td><td>" + age + "</td><td><button class='edit'>编辑</button><button class='delete'>删除</button></td></tr>"; $("#myTable tbody").append(newRow); } }); }); ``` 这段代码实现了编辑、删除和添加一行按钮的点击事件。具体来说,当用户点击编辑按钮时,会弹出一个对话框,让用户输入新的姓名和年龄,然后更新表格对应的单元格;当用户点击删除按钮时,会删除该行数据;当用户点击添加一行按钮时,会弹出一个对话框,让用户输入新的姓名和年龄,然后在表格的最后一行添加一条新的数据。 以上就是动态生成添加修改删除表格的代码示例,希望能对您有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值