<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<!--表单元素名可以用行数做后缀，后台取值的时候可以把隐藏域的值取出来，用他循环取到所有表单元素的值，你也可以用相同的表单名，后台会取到数组？没试过-->
<form>
<script language="JavaScript">
function addRow(obj)
{
var num = document.all.logger.value;
document.all.logger.value=(document.all.logger.value*1)+1;
//添加一行
var newTr = membertable.insertRow();
//增加列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
var newTd4 = newTr.insertCell();
var newTd5 = newTr.insertCell();
var newTd6 = newTr.insertCell();
var newTd7 = newTr.insertCell();
var newTd8 = newTr.insertCell();
//设置列内容和属性
//注意里面表单元素的名字,我这里没做修改,自己改成自己想要的吧
newTd0.innerHTML = (num*1+1);
newTd1.innerHTML= "<input type='text' size='8' name='PROD_NM"+(num*1)+"' />";
newTd2.innerHTML= "<input type='text' size='8' name='PROD_MODEL_CH"+(num*1)+"' />";
newTd3.innerHTML= "<input type='text' size='8' name='PROD_MODEL_CH"+(num*1)+"' />";
newTd4.innerHTML= "<input type='text' size='8' name='PROD_MODEL_CH"+(num*1)+"' />";
newTd5.innerHTML= "<input type='text' size='8' name='PROD_MODEL_CH"+(num*1)+"' />";
newTd6.innerHTML= "<input type='text' size='8' name='PROD_MODEL_CH"+(num*1)+"' />";
newTd7.innerHTML= "<input type='text' size='8' name='PROD_MODEL_CH"+(num*1)+"' />";
newTd8.innerHTML= "<input name='button' type='button' onclick='__javascript:delRow(this.parentElement.parentElement)' value='删除' />";
newTd0.align = "center";
newTd1.align = "center";
newTd2.align = "center";
newTd3.align = "center";
newTd4.align = "center";
newTd5.align = "center";
newTd6.align = "center";
newTd7.align = "center";
newTd8.align = "center";
}
function delRow(src){
src.parentElement.deleteRow(src.rowIndex);
}
</script>
<input type="button" onclick="addRow() " value="增加一行"><input type="hidden" id='logger' name="logger" value="2"><!--这里的隐藏域的值等于一开始的行数（不包括标题行，如现在就等于2）--><br>
<table width='100%' id="membertable" border='1' cellpadding='1' cellspacing='0'>
<tr>
<td colspan='9' align='center'>成员组成方案</td>
</tr>
<tr>
<td align='center'>序号</td>
<td align='center'>本会职务</td>
<td align='center'>姓名</td>
<td align='center'>工作单位</td>
<td align='center'>职务/职称</td>
<td align='center'>电话</td>
<td align='center'>Email</td>
<td align='center'>备注</td>
<td align='center'>删除</td>
</tr>
<tr>
<td align='center'>1</td>
<td align='center'><input type='text' size='8' name='PROD_NM0' /></td>
<td align='center'><input type='text' size='8' name='PROD_MODEL_CH0' /></td>
<td align='center'><input type='text' size='8' name='STAND_NO0' /></td>
<td align='center'><input type='text' size='10' name='STAND_NM0' /></td>
<td align='center'><input type='text' size='10' name='FUN_DUTY' /></td>
<td align='center'><input type='text' size='10' name='NT_STANDARD_ID0' /></td>
<td align='center'><input type='text' size='8' id='BACKUPNUM0' name='UP_BACKUPNUM0' /> </td>
<td align='center'>
<input name='button' type='button' onclick='__javascript:delRow(this.parentElement.parentElement)' value='删除' /></td>
</tr>
<tr>
<td align='center'>2</td>
<td align='center'><input type='text' size='8' name='UP_PROD_NM0'></td>
<td align='center'><input type='text' size='8' name='UP_PROD_MODEL_CH0' /></td>
<td align='center'><input type='text' size='8' name='UP_STAND_NO0' /></td>
<td align='center'><input type='text' size='10' name='UP_STAND_NM0' /></td>
<td align='center'><input type='text' size='10' name='UP_FUN_DUTY' /></td>
<td align='center'><input type='text' size='10' name='UP_INT_STANDARD_ID0' /></td>
<td align='center'><input type='text' size='8' id='UP_BACKUPNUM0' name='UP_BACKUPNUM0' /> </td>
<td align='center'><input name='button' type='button' onclick='__javascript:delRow(this.parentElement.parentElement)' value='删除' /> </td>
</tr>
</table>
<input type="button" onclick="addRow() " value="增加一行">
</form>
</body>
</html>
分享到：
相关推荐
本教程将深入讲解如何用JS控制表格的交替颜色，使其呈现出更美观的视觉效果。 首先，我们需要理解HTML表格的基本结构。一个简单的表格由`<table>`标签定义，内部包含`<tr>`（行）和`<td>`（单元格）元素。在...
这篇博文"JavaScript控制表格换色"将探讨如何使用JavaScript实现这一功能。 首先，我们要理解HTML表格的基本结构。一个基本的HTML表格由`<table>`元素定义，`<tr>`表示行，`<th>`表示表头，`<td>`表示单元格。我们...
接下来，我们将讨论如何用JavaScript控制表格的添加操作。通常，我们会在页面上放置一个按钮，当用户点击时触发添加新的行或单元格。以下是一个简单的示例： ```html ()">添加行 function addRow() { var table ...
用javascript 控制表格行的展开和隐藏的代码 本文档提供了一份使用 JavaScript 控制表格行的展开和隐藏的代码。该代码使用了 JavaScript 语言，并且提供了一个实用的示例代码，展示了如何使用 JavaScript 来控制...
在JavaScript（JS）编程中，处理HTML表格是常见的任务，特别是在动态交互的Web应用中。本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先...
js 实现 用JavaScript隐藏或显示表格列! 值得下载看看!资源免费,大家分享!!
可用于多选操作等等
通过js自由控制表格宽度，有两种选择 1.表格宽度未设定或表格宽度白分比显示 2.表格宽度设定了,控制表格宽度
总结一下，用JavaScript控制表格的交替颜色特效主要是通过遍历表格行并根据行的索引来切换背景色，或者使用事件监听和CSS类来实现动态效果。这种方法可以提升表格的可读性，让用户更容易浏览和理解数据。
总的来说，JavaScript提供了强大的DOM操作能力，使得我们可以灵活地控制网页中的HTML元素，包括动态创建和删除表格。在实际项目中，结合CSS和Ajax，可以实现更丰富的表格功能，如排序、过滤和分页等。
为了提升用户体验，我们可以利用JavaScript（js）以及jQuery库来实现表格相同数据的合并功能，使表格看起来更整洁、专业。 首先，我们要理解JavaScript的基本概念。JavaScript是一种轻量级的解释型编程语言，广泛...
综上所述，"纯js电子表格操作"涵盖了许多JavaScript开发中的核心技能，包括文件操作、数据解析、异步编程、代码质量控制和项目构建。通过js-xlsx这样的库，开发者能够在浏览器环境中实现强大的Excel文件处理功能。
总结来说，JS控制表格实现一条光线流动分割行的方法，主要是通过JavaScript动态生成表格单元格并设置其背景颜色，配合定时器实现颜色的逐帧变化，从而营造出流动的视觉效果。这种技术在网页设计中可以增加互动性和...
`Table.js`的核心在于它的API，这是一系列预定义的方法，允许开发者以简洁的方式控制表格的生成、数据的填充以及样式调整。下面我们将深入探讨`Table.js`的一些关键功能和用法。 1. **初始化表格**： 使用`Table....
其次，“表格样式js”是指使用JavaScript来控制HTML表格的显示效果。`selectListHelper.js`可能是辅助处理表格样式的工具。在前端开发中，我们经常需要动态地改变表格的样式，如行高亮、列隐藏、排序、过滤数据等。...
综上所述，JavaScript控制操作表格涉及众多技术点，从基本的DOM操作到高级的前端框架和插件使用，都需要开发者具备一定的技能和理解。通过这些技术，可以构建出高效、互动且功能丰富的表格应用。
综上所述，"js+实现+滚动的表格"是通过JavaScript和CSS实现的一种增强网页表格用户体验的技术。它不仅使得大量数据的展示更为便捷，还提升了网页的交互性和性能。通过理解和掌握这些知识，开发者能够创建更加高效、...
这可能需要使用到CSS的z-index属性来控制不同层级的显示顺序，以及JavaScript来处理嵌套元素的位置。 3. **固定指定列**：除了固定表头，还可以选择性地固定表格的某些列。这通常是通过创建一个新的div层，将需要...
本话题将详细讲解如何使用JavaScript（JS）来实现这两个功能。 首先，让我们从点击表头进行排序开始。在HTML中，我们可以创建一个带有表头（th）的表格，然后通过JavaScript监听这些表头的点击事件。当用户点击某个...