`
zhangyaou
  • 浏览: 6205 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

javascript动态增加删除行

阅读更多
<html>
<head>
<script type="text/javascript">
function add(){
var num = parseInt(document.getElementById("num").value)+1;
document.getElementById("dyn").innerHTML += ("name"+num+"<input type='text' id='name"+num+"' /><br/><br/>");
document.getElementById("num").value=num;

}

function del(){
var num = parseInt(document.getElementById("num").value);
if(num == 0){
return;
}
var temp = document.getElementById("dyn").innerHTML;
document.getElementById("dyn").innerHTML = temp.substring(0,temp.indexOf("name"+num));
document.getElementById("num").value = num-1;
}

function jstoggle(togglecontent){
var temp = document.getElementById(togglecontent).style.display;
if(temp == "block" || temp==""){
document.getElementById(togglecontent).style.display = "none";
}else {
document.getElementById(togglecontent).style.display = "block";
}
}
</script>
<head>
<body>
<div id="hello" >
<p>hello world
</div>
<button id="dynadd" onclick="add();">add</button>
<button id="dyndel" onclick="del();">delete</button>
<button id="tog" onclick="jstoggle('dyn');">toggleDyn</button>
<button id="tog" onclick="jstoggle('hello');">toggleHello</button>
<div id="dyn">
<input type="hidden" id="num" value="0"/>
</div>
</body>
</html>







分享到:
评论

相关推荐

    JavaScript动态添加删除表格行

    这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`&lt;table&gt;`元素用于创建...

    javascript table 增加删除行,巧妙实现

    在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`&lt;table&gt;`元素及其相关...

    js/Jquery/javascript动态添加删除行,统计计算总数.

    用Jquery 添加删除行, 并进行计算 品名 数量 单价 金额(计算得出) 添加(按钮) 品名 数量 单价 金额(计算得出) 删除(按钮) .... --- 总计:

    纯javascript增加删除表格行

    4. **动态交互**:为了使用户体验更好,可以添加更多的交互功能,比如禁用删除按钮,或者在添加行时自动填充数据。这可以通过检查特定条件或使用`addEventListener`来实现。 5. **性能优化**:在处理大量数据时,应...

    JavaScript动态操作表格,添加,删除行、列及单元格

    JavaScript动态操作表格,添加,删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先,我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含,其中包含`&lt;tr&gt;`(表格行)元素,每行内可以有多个`&lt;td&gt;`(表格数据单元格)或`...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

    JSP中使用JavaScript动态插入删除输入框实现代码.docx

    JSP中使用JavaScript动态插入删除输入框实现代码 JSP(Java Server Pages)是一种基于Java技术的服务器端脚本语言,主要...通过JavaScript代码,我们可以动态地添加或删除输入框,提高了Web应用程序的交互性和灵活性。

    javascript动态添加一行数据和删除数据

    利用javascript来结合html,可以动态的添加一行数据,和根据索引来删除一行数据。

    jquery表格动态添加删除行代码.zip

    总的来说,"jquery表格动态添加删除行代码"是一个结合了HTML、CSS和JavaScript(主要是jQuery)的示例,它展示了如何利用这些技术来实现动态交互的表格功能。这样的功能在许多Web应用程序中都有广泛的应用,例如在线...

    js动态添加和删除行

    同样,你可以根据需求修改这个示例,比如添加删除行的功能,或者改变单元格的内容和行为。理解这些基本原理后,就能灵活应对各种复杂的交互需求了。在实际项目中,你可能会遇到性能优化、兼容性处理、错误处理等问题...

    动态增加删除行.html

    在动态操作中,我们需要关注如何通过JavaScript或者jQuery来实现行的添加和删除。 1. **动态添加行**: - JavaScript或jQuery提供了DOM操作API,如`createElement()`、`appendChild()`和`innerHTML`等,可以用来...

    Ajax动态表格,可适时添加行、删除行、复制行

    本话题将深入探讨如何实现一个动态表格,用户可以适时添加、删除和复制表格中的行。 首先,我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器,获取或提交数据,然后使用JavaScript处理这些...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    JS动态增加删除行

    在JavaScript(JS)编程中,动态增加和删除行是一项常见的任务,特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验,使用户能够实时地添加或移除数据,无需刷新整个页面。以下是对这一知识点的详细...

    javascript实现动态添加删除表格行

    NULL 博文链接:https://1148130696.iteye.com/blog/1726191

    74、jquery表格动态添加删除行代码

    &lt;title&gt;jQuery动态添加删除行 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 姓名 年龄 操作 张三 &lt;td&gt;25 &lt;td&gt;&lt;button class="delete"&gt;删除&lt;/button&gt;&lt;/td&gt; ...

    JS动态添加删除HTML元素(实例)

    本例子展示了如何使用 JavaScript 实现动态添加删除 HTML 元素,包括获取元素对象、添加新行、删除行等操作。通过这篇文章,我们可以更好地理解 JavaScript 和 HTML 之间的交互,并掌握动态添加删除 HTML 元素的技术...

    javascript实现表格添加删除等操作

    4. **数据管理**:如果表格数据存储在JavaScript数组中,那么在添加、删除或编辑行时,也应同步更新数组。这有助于保持数据的一致性,并可能用于其他操作,如排序或过滤。 5. **模板字符串**:在创建新的HTML元素时...

Global site tag (gtag.js) - Google Analytics