<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态添加表格示例</title>
<script language="javascript">
//CopyRight@liwei 2005/11
//动态删除行的函数还没有完成。注意innerHTML里面的控件代码属性赋值的时候不要使用引号
function addLine(){
var newLine = planTable.rows.length;
var row = planTable.insertRow(newLine);
var col = row.insertCell(0);
col.innerHTML = "<input type=checkbox name = chk" + newLine + ">";
col = row.insertCell(1);
col.innerHTML = "<input type=text size=8>";
col = row.insertCell(2);
col.innerHTML = "<select name=object><option value=1>软件项目1</option><option value=2>软件项目2</option></select>";
col = row.insertCell(3);
col.innerHTML = "<select name=select><option value=1>计划编号1</option><option value=2>计划编号2</option></select>";
col = row.insertCell(4);
col.innerHTML = "<textarea name=textarea cols='40'></textarea>";
return newLine;
}
function keyDwonEvent(){
//alert(event.keyCode);
var newLine;
var txt;
if (event.keyCode == 13&&event.ctrlKey) {
newLine = addLine();
}
/*
txt = "line"+newLine+"startTime"
txt.setFocus;alert(txt);*/
}
function delLine(){
var i;
var count;
count = planTable.rows.length;
if(count>2){
planTable.deleteRow(planTable.rows.length-1)
for(i=0;i<count-1;i++){
//if(document.chk[i].checked){
//alert("aa");
//}
}
}
}
</script>
</head>
<body>
<center>
<table border="0" width="80%" align="center">
<tr align="center" valign="top">
<td height="37" colspan="9"><h2 align="center">日工作计划报告单</h2></td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td height="30"> </td>
<td width="15%">填表人: </td>
<td width="15%"><input name="text2" type="text" disabled value="职员1" size="10"></td>
<td width="1%"> </td>
<td width="21%"> </td>
<td> </td>
<td><input name="button" type="button" onClick="addLine()" value="新增计划项"></td>
<td><input name="button2" type="button" onClick="delLine()" value="删除计划项"></td>
<td><input name="button3" type="button" value="提交计划报表"></td>
</tr>
<tr>
<td width="6%" height="19">
</td>
<td colspan="4"><font size="-1"color="#FF0000">注:起止时间栏请按照 HH:SS-HH:SS 格式输入</font></td>
<td width="6%"> </td>
<td width="11%"> </td>
<td width="11%"> </td>
<td width="14%"> </td>
</tr>
<tr><td colspan="9">
</td>
<tr>
<td height="302" valign="top" colspan="9">
<table align="center" width="100%" border="1" cellpadding="1" cellspacing="0">
<tr valign="top">
<td height="258">
<table align="center" width="100%" border="1" id="planTable" cellpadding="1" cellspacing="0">
<tr align="center" bgcolor="#66CCCC" onMouseOver="">
<td width="6%">选择</td>
<td width="17%">起止时间</td>
<td width="15%">选择项目:</td>
<td width="15%">项目计划</td>
<td width="47%">工作计划内容</td>
</tr>
<tr align="center">
<td ><input type="checkbox" name="chk0"> </td>
<td ><input name="text" type="text" size="8"></td>
<td ><select name="object">
<option value="1">软件项目1</option>
<option value="1">软件项目2</option>
</select></td>
<td ><select name="select">
<option value="">计划编号1</option>
<option value="">计划编号2</option>
</select></td>
<td><textarea name="textarea" cols="40" onKeyDown="keyDwonEvent()"></textarea></td>
</tr>
</table> </td>
</tr>
</table></td>
</tr>
</table>
</center>
</body>
</html>
分享到：
相关推荐
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
动态添加表格tr td功能意味着我们可以根据需要随时在表格中添加新的行和列。通常，这涉及到两个主要步骤：发送ajax请求到服务器获取数据，然后将返回的数据动态添加到表格中。 ##### 2.1 前端HTML结构 首先，我们...
本示例将详细介绍如何在ASP.NET后台使用C#语言来实现动态添加表格的功能。 首先，我们需要了解动态创建表格的基本步骤： 1. **创建表格对象**：在C#代码中，使用`new`关键字创建一个`HtmlTable`对象，这是ASP.NET...
在JavaScript（JS）中动态生成表格是一项常见的任务，特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能，以及相关的源码和工具。 首先，我们要明白HTML表格的基本结构，它由`<table>`、`...
在JavaScript编程中，插入表格空白行是一项常见的任务，特别是在网页动态数据展示时。这个示例源码可能展示了如何使用纯JavaScript来实现这一功能。在.NET环境中，JavaScript通常用于客户端交互，而服务器端语言如C#...
在JavaScript（简称js）开发中，经常需要处理各种数据，并将其展示在用户界面上，例如生成表格。在本场景中，我们关注的是如何利用js从本地的JSON数据文档中读取信息，然后根据数据结构动态生成列数不固定的表格。这...
JavaScript文件（在这里可能是`js`目录下的一个或多个文件）则负责处理动态添加行的逻辑。jQuery库提供了简便的API来操作DOM，例如`$(selector).append(content)`可以将新的HTML内容追加到指定的选择器后面，从而...
动态添加表格的核心在于通过编程语言控制HTML元素的生成，例如JavaScript在浏览器环境中，或者在服务器端的Java、Python等。在前端，我们通常会利用DOM（Document Object Model）操作，例如创建`<table>`, `<tr>`, `...
在JavaScript中，动态生成table是一种常见的网页交互功能，它允许我们根据需求在页面上实时创建、添加或删除表格行（tr）和单元格（td）。这个功能在数据展示、表格编辑或者用户交互丰富的应用场景中非常实用。下面...
在IT行业中，将后台数据以表格的形式展示在HTML页面上是一项常见的需求，这通常涉及到前端与后端的数据交互以及数据的解析与呈现。本案例中，我们关注的是如何利用XML作为数据传输格式，并通过JavaScript来动态创建...
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
"动态表格-添加删除行"这个主题涉及到的技术主要是JavaScript库AutoTable，它允许开发者在HTML页面上创建功能丰富的表格，并且支持动态操作，如添加和删除行。下面我们将详细探讨AutoTable的使用、动态操作行的方法...
### JavaScript 动态向网页中添加表格实现代码详解 #### 一、背景介绍 在Web开发中，经常需要根据后台返回的数据动态生成HTML元素。其中，动态生成表格是一种常见的需求，尤其是在展示数据列表时。本篇文章将详细...
标题中的".net动态添加行"指的是在.NET框架中，特别是在ASP.NET环境中，如何在网页上动态地添加表格（如HTML表格或GridView等）的行。这种功能常用于数据输入场景，用户可以一次处理多条记录，提高用户体验，尤其是...
3. **JavaScript处理**：在JavaScript中，你需要根据数据源动态生成表格的列配置。使用`$.extend()`方法创建一个新的列配置对象，将数据源中的列信息合并进去。 ```javascript var columns = []; // 遍历数据源中的...
在给定的示例中，HTML部分包括两个输入框（id分别为"row"和"col"）用于输入行和列数，以及一个按钮（id为"go"）用于触发生成表格的函数`add()`。 JavaScript部分的核心在于`add()`函数。这个函数首先获取用户在...
在JavaScript编程中，动态生成表格是一项常见的...通过学习和实践这个项目，开发者可以提升自己的前端技能，理解如何在网页中动态生成和操作表格，同时也能掌握如何利用CSS来实现各种视觉效果，提升网页的用户体验。
给定的部分代码示例展示了如何使用JavaScript在客户端动态添加表格的行和列。在`addRow()`函数中，首先计算当前表格的行数，然后创建一个新的行元素，并为该行添加多个列元素。每一列的文本内容由其ID生成，这样可以...
在现代网页设计与开发中，动态地向网页中添加表格是一种常见的需求，尤其在展示数据统计、用户信息等方面。利用JavaScript来实现动态添加表格的功能，能够有效地提高页面的交互性和用户体验。本文将详细介绍如何使用...
在网页开发中，动态添加HTML控件是一种常见的需求，它允许开发者在用户交互时或程序运行过程中创建或移除页面元素。这样的技术尤其在ASP.NET框架中显得尤为重要，因为这可以实现更灵活、响应式的用户体验。本文将...