<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">// Example: obj = findObj("image1");
function findObj(theObj, theDoc){
var p, i, foundObj;
//alert("1 theDoc:" + theDoc);
if(!theDoc)
theDoc = document;
//alert("2 theDoc:" + theDoc);
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) {
alert("1 p:" + p);
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
//alert("3 theDoc:" + theDoc);
//alert("3 theObj:" + theObj);
if(!(foundObj = theDoc[theObj]) && theDoc.all){
foundObj = theDoc.all[theObj];
//alert("foundObj:" + foundObj);
}
for(i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById)
foundObj = document.getElementById(theObj);
return foundObj;
}
//添加一个参与人填写行
function AddSignRow(){
//读取最后一行的行号，存放在txtTRLastIndex文本框中
var txtTRLastIndex = findObj("txtTRLastIndex",document);
var rowID = parseInt(txtTRLastIndex.value);
var signFrame = findObj("SignFrame",document);
//添加行
var newTR = signFrame.insertRow(signFrame.rows.length);
newTR.id = "SignItem" + rowID;
//添加列:序号
var newNameTD=newTR.insertCell(0);
//添加列内容
newNameTD.innerHTML = newTR.rowIndex.toString();
//添加列:姓名
var newNameTD=newTR.insertCell(1);
//添加列内容
newNameTD.innerHTML = "<input name='txtName" + rowID + "' id='txtName" + rowID + "' type='text' size='12' />";
//添加列:电子邮箱
var newEmailTD=newTR.insertCell(2);
//添加列内容
newEmailTD.innerHTML = "<input name='txtEMail" + rowID + "' id='txtEmail" + rowID + "' type='text' size='20' />";
//添加列:电话
var newTelTD=newTR.insertCell(3);
//添加列内容
newTelTD.innerHTML = "<input name='txtTel" + rowID + "' id='txtTel" + rowID + "' type='text' size='10' />";
//添加列:手机
var newMobileTD=newTR.insertCell(4);
//添加列内容
newMobileTD.innerHTML = "<input name='txtMobile" + rowID + "' id='txtMobile" + rowID + "' type='text' size='12' />";
//添加列:公司名
var newCompanyTD=newTR.insertCell(5);
//添加列内容
newCompanyTD.innerHTML = "<input name='txtCompany" + rowID + "' id='txtCompany" + rowID + "' type='text' size='20' />";
//添加列:删除按钮
var newDeleteTD=newTR.insertCell(6);
//添加列内容
newDeleteTD.innerHTML = "<div align='center' style='width:40px'><a href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">删除</a></div>";
//将行号推进下一行
txtTRLastIndex.value = (rowID + 1).toString() ;
}
//删除指定行
function DeleteSignRow(rowid){
var signFrame = findObj("SignFrame",document);
var signItem = findObj(rowid,document);
//获取将要删除的行的Index
var rowIndex = signItem.rowIndex;
//删除指定Index的行
signFrame.deleteRow(rowIndex);
//重新排列序号，如果没有序号，这一步省略
for(i=rowIndex;i<signFrame.rows.length;i++){
signFrame.rows[i].cells[0].innerHTML = i.toString();
}
}
//清空列表
function ClearAllSign(){
if(confirm('确定要清空所有参与人吗？')){
var signFrame = findObj("SignFrame",document);
var rowscount = signFrame.rows.length;
//循环删除行,从最后一行往前删除
for(i=rowscount - 1;i > 0; i--){
signFrame.deleteRow(i);
}
//重置最后行号为1
var txtTRLastIndex = findObj("txtTRLastIndex",document);
txtTRLastIndex.value = "1";
//预添加一行
AddSignRow();
}
}
</script>
</HEAD>
<BODY>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" id="SignFrame">
<tr id="trHeader">
<td width="27" bgcolor="#96E0E2">序号</td>
<td width="64" bgcolor="#96E0E2">用户姓名</td>
<td width="98" bgcolor="#96E0E2">电子邮箱</td>
<td width="92" bgcolor="#96E0E2">固定电话</td>
<td width="86" bgcolor="#96E0E2">移动手机</td>
<td width="153" bgcolor="#96E0E2">公司名称</td>
<td width="57" align="center" bgcolor="#96E0E2"> </td>
</tr>
</table>
</div>
<div>
<input type="button" name="Submit" value="添加参与人" onclick="AddSignRow()" />
<input type="button" name="Submit2" value="清空" onclick="ClearAllSign()" />
<input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
</div>
</BODY>
</HTML>
分享到：
相关推荐
### jQuery+ajax实现动态添加表格tr td功能 在进行Web开发时，我们经常需要动态地从服务器获取数据，并将这些数据展示在网页上。表格是展示这些数据的一种常见形式。本文将详细解析使用jQuery和ajax技术来实现动态...
通过JavaScript动态添加表格行和单元格，可以创建交互式网页，实现数据的动态展示，以及提高用户体验。 描述部分说明了文章将涉及JavaScript针对表格中TR、TD节点的操作技巧。这包括如何使用JavaScript来插入新行、...
动态创建一个表格。动态创建一个表格。动态创建一个表格。
本篇文章将详细讲解如何在不预先知道table ID的情况下，使用jQuery来隐藏table中的tr或td元素，以及涉及到的相关知识点。 首先，让我们了解HTML的table结构。一个基本的HTML表格由`<table>`标签开始，内部包含`<tr>...
通过在单元格元素的innerHTML属性中直接嵌入HTML标记，可以向表格中动态添加具有特定值的输入控件。 通过上述知识点，可以了解到动态网页内容创建和管理的完整流程，从响应用户交互开始，到向服务器请求数据、处理...
在JavaScript编程中，动态添加`td`（表格数据单元格）和`tr`（表格行）是常见的需求，尤其在创建交互式网页时。本文将深入探讨如何利用JavaScript实现这一功能，以及它在实际开发中的应用。 首先，我们需要了解HTML...
本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...
/* 第一种，原生的js，先获取table然后获取tr标签，然后遍历td */ // $('#selectIds').val(); // var table = document.getElementById(tb_table);//获取第一个表格 // var array = table.getElementsByTagName(tr...
js操作ＨＴＭＬ增加删除ＴＲ／ＴＤ （学前班级别的哈！）
本文将详细讲解如何使用JavaScript动态添加`<tr>`元素，即表格行，以及如何结合DIV+CSS实现页面布局。 一、JS动态添加`<tr>` 在HTML中，`<table>`元素用于创建表格，而`<tr>`元素代表表格的一行。在JavaScript中，...
综上所述，解决表格中单元格内容超出宽度自动换行的方法是设置表格的布局为固定宽度，并且给单元格添加`word-wrap: break-word;`的样式规则。这样做既保持了布局的整齐性，又确保了内容的完整显示。希望这篇文章能够...
- 给`td`添加文本：`newCell.innerHTML = '新数据'` - 将`td`添加到`tr`：`newRow.appendChild(newCell)` - 将`tr`添加到`table`：`document.getElementById('myTable').appendChild(newRow)` 3. **删除行（tr）...
TABLE由TBODY、TR（行）和TD（单元格）组成，TD是存储实际数据的地方。动态获取TD内容意味着我们需要编写代码来实时抓取或更新表格中的信息。 1. **JavaScript基础操作**：JavaScript是最常用的客户端脚本语言，...
本篇文章将详细讲解如何在 WebDriver 中有效地读取和操作页面中的表格元素，如 `table`，`tr` 和 `td`。 首先，`table` 元素是 HTML 中用于展示数据的结构化组件，通常用于创建二维表格。`tr`（table row）元素定义...
HTML表格通常由`<table>`标签定义，其中包含若干行`<tr>`和若干列`<td>`或`<th>`。我们的目标是找到所有的`<td>`元素并获取它们的文本内容。 在C#中，我们可以使用`System.Text.RegularExpressions`命名空间中的`...
总之，JavaScript动态添加`tr`节点是网页动态更新和数据绑定的重要技术之一，尤其在处理表格数据时。通过合理使用DOM操作方法，我们可以创建出响应式、交互性强的网页应用。在实际开发中，结合源码分析和工具使用，...
本篇文章将深入探讨如何使用jQuery来动态地给HTML表格（table）赋值，通过一个具体的实例来展示相关技巧。 首先，我们需要一个基本的HTML结构，包含一个具有特定类和ID的table元素。在这个例子中，我们有一个layui...
分别显示/隐藏TABLE,TR,TD等经典代码，使用js控制。