`
acen.chen
  • 浏览: 157323 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

动态增加行 js代码

阅读更多
	 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- JavaScript 实现动态增加、删除表单域 -->
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
var i=0
function fireAdd()
{
var temp = document.getElementById("third");
 temp.insertRow(temp.rows.length);
 temp.rows.item(temp.rows.length -1).insertCell(0);
 var xx=temp.rows.length -1 ;//-1
 var sHTML
 sHTML='<TABLE border=\"1\" style=\"border-collapse: collapse\" bordercolor=\"#111111\"width=\"100%\">' +
       '<TR>' +
       '<TD align=\"center\" colspan=\"4\">个人信息 (' + i++ +')</TR>' +
       '<TR>' +
       '<TD align=\"right\">姓名:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=\"text\" NAME=\"tName\"></TD>' +
       '<TD align=\"right\">性别:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=\"radio\" checked NAME=\"rSex\">先生&nbsp;&nbsp;<INPUT TYPE=\"radio\" NAME=\"rSex\">女士</TD>' +
       '</TR>' +
       '<TR>' +
       '<TD align=\"right\">职务:</TD>' +
       '<TD>&nbsp;<SELECT NAME=\"\">' +
       '<option value=\"其它\">&nbsp;其它&nbsp;</option>' +
       '<option value=\"经理\">&nbsp;经理&nbsp;</option>' +
       '</SELECT>' +
       '</TD>' +
       '<TD align=\"right\">邮件:</TD>' +
       '<TD>&nbsp;<INPUT TYPE=\"text\" NAME=\"tMail\"></TD>' +
       '</TR>' +
       '<TR>' +
       '<TD align=\"center\" colspan=\"4\"><input type=\"button\" value=\" 删除 \" onclick=\"Delete(this);\">'
       '</TR>' +
       '</TABLE>';
temp.rows.item(temp.rows.length-1).cells.item(0).innerHTML=sHTML;


temp.rows.item(temp.rows.length-1).cells.item(0).childNodes.item(0).rows.item(3).cells.item(0).childNodes.item(0).text=xx;



 }
function Delete(x)
{
var temp = document.getElementById("third");
 temp.deleteRow(x.text.valueOf())
 for (var j=0;j<temp.rows.length;j++)
 {
    temp.rows.item(j).cells.item(0).childNodes.item(0).rows.item(3).cells.item(0).childNodes.item(0).text=j;
 }
}


</SCRIPT>
</HEAD>
<BODY>
<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td align="center">
<INPUT TYPE="button" value=" 添加 " onclick="fireAdd()">
</td>
</tr>
<tr>
<td align="center">
    <TABLE align=center border=0 width="100%" height="100%" id="second">
    <TR>
           <TD width="100%" height="300" align="center">
               
                    <TABLE width="100%" id="third">
                    </TABLE>
             
        </TD>
    </TR>
    </TABLE>
</td>
</tr>
</table>
</BODY>
</HTML>


 

分享到:
评论

相关推荐

    动态创建iframe,并动态添加js执行代码

    总结来说,动态创建iframe并动态添加js执行代码是Web开发中的重要技术,它能够帮助我们实现异步加载、跨域通信等功能,但同时也需要注意相关的安全问题。通过熟练掌握这些技术,开发者能够构建更复杂、更灵活的Web...

    js 添加行代码添加行代码

    添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码添加行代码

    js动态添加行和删除行

    在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...

    Javascript动态网页编程源代码

    本资源包含了一系列关于JavaScript动态网页编程的源代码,这些源代码覆盖了多个章节的内容,包括但不限于: 1. **第7章**:通常涉及DOM(Document Object Model)操作,这是JavaScript与HTML页面交互的基础。通过...

    javascript动态行(代码清晰易懂)

    1. **动态增加行**:在JavaScript中,我们可以使用`document.createElement('tr')`来创建一个新的表格行对象,然后通过`innerHTML`属性设置行中的内容。例如,我们可以创建一个新的`&lt;td&gt;`元素,填充数据,然后将它...

    js动态添加行

    以下是关于"js动态添加行"的详细解释: 1. **理解DOM**: DOM是HTML或XML文档的结构化表示,它将网页内容转化为一个树状结构,使得我们可以用编程方式访问和修改页面元素。在JavaScript中,`document`对象提供了与...

    一个动态添加table行的js例子

    在JavaScript编程中,动态添加和删除表格行是一个常见的需求,特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先,我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...

    利用javascript动态添加行(原创)

    在JavaScript编程中,动态添加行是一项常见的任务,特别是在构建数据驱动的Web应用或者处理表格数据时。这个技术允许用户在运行时向HTML表格或其他结构化元素中插入新的内容,提高用户体验,无需页面刷新。以下是对...

    JS删除或者添加一行的代码

    描述解释:该代码提供了 JavaScript 实现动态添加或删除表格行的功能,可以直接测试和应用。 标签解释:删除添加一行,指的是在网页中通过 JavaScript 动态添加或删除表格行的操作。 部分内容解释: 该代码主要...

    js下为表格内部动态添加行的代码.docx

    以下是对应的JavaScript代码: ```javascript function addRow() { // 获取表格元素 var table = document.getElementById("dynamicTable"); // 创建新行 var newRow = table.insertRow(-1); // 在新行中...

    可以动态增加table行的javascript代码

    * 1、&lt;script language="javascript" src="js/addContentRow.js"&gt; * 2、 * &lt;!-- 附件部分 --&gt; * * &lt;tr&gt;&lt;/tr&gt; * * * &lt;a href="javascript:addpicrow();"&gt;增加 * &lt;a href="javascript:...

    js代码高亮显示 JavaScript代码高亮 jsp

    JavaScript代码高亮显示是提高代码可读性的关键工具,通过使用像Highlight.js或Prism.js这样的库,可以在JSP页面上轻松实现这一功能。了解如何正确地集成和配置这些库,可以帮助开发者创建更专业、更易于阅读的代码...

    h5动态注入js代码

    而“h5动态注入js代码”是指在H5页面运行时,通过JavaScript程序动态地向页面中添加或修改JavaScript代码,以实现更灵活的功能扩展和页面交互。这种方式常见于响应式设计、数据可视化、用户行为追踪等多种场景。 一...

    vue动态加载外部依赖js代码实现

    ### Vue动态加载外部JS代码实现 #### 概述 在前端开发中,有时我们需要动态地加载外部JavaScript库或脚本文件。特别是在构建大型Vue应用程序时,可能会遇到需要按需加载某些功能的情况,例如第三方库、API接口等。...

    JS动态增加删除表格行

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

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

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

    页面动态增加行

    综上所述,"页面动态增加行"和"动态删除行"涉及JavaScript对DOM的操作,事件监听以及用户交互。通过这些技术,开发者可以创建更具活力和响应性的网页应用,提升用户的交互体验。在实际项目中,这通常与Ajax异步通信...

    JS动态增加删除行

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

    动态添加行动态添加行

    动态添加行指的是在用户执行特定操作(如点击按钮)时,通过JavaScript在页面上的表格或列表中插入新的行。这种功能在数据输入、展示可变数量的信息或者允许用户自定义内容的场景中非常实用。 首先,理解基本的HTML...

    1号店完整代码_js代码_一号店代码_京东1号店_

    - **js**:JavaScript代码库,包含实现上述功能的具体代码。 - **.idea**:这是IDE(如IntelliJ IDEA)的工作目录,包含了项目配置信息,对开发者来说很有用,但对最终用户来说是不可见的。 综上所述,这个项目是一...

Global site tag (gtag.js) - Google Analytics