[Javascript]在HTML页面中动态添加表格，动态生成行的示例

最新推荐文章于 2024-07-20 18:56:42 发布
最新推荐文章于 2024-07-20 18:56:42 发布
阅读量1.6w 收藏 6
点赞数 1
分类专栏： Java体系 文章标签： javascript html newline button input border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/softwave/article/details/532036
版权
<!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">&nbsp;</td>
  <td width="15%">填表人: </td>
  <td width="15%"><input name="text2" type="text" disabled value="职员1" size="10"></td>
  <td width="1%">&nbsp;</td>
  <td width="21%">&nbsp;</td>
  <td>&nbsp;</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">&nbsp;
  </td>
<td colspan="4"><font  size="-1"color="#FF0000">注:起止时间栏请按照 HH:SS-HH:SS 格式输入</font></td>

<td width="6%">&nbsp;</td>
<td width="11%">&nbsp;</td>
<td width="11%">&nbsp;</td>
<td width="14%">&nbsp;</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>

系统信息
关注
专栏目录
java document创建节点_HTML中表格动态添加_动力节点Java学院整理
weixin_33573700的博客
02-16 551
废话不多说了，直接给大家贴代码了，具体代码如下所示：TableFirst NameLast Name 张三function add() {var trObj = document.createElement("tr");trObj.id = new Date().getTime();trObj.innerHTML = " ";document.getElementById("tb").append...
html给表格动态添加数据,html表格动态添加.doc
weixin_42615290的博客
06-04 1424
html表格动态添加html表格动态添加篇一：JavaScript动态操作表格,添加,删除行、列及单元格_表单按钮特效//W3C//DTD HTML 4.01 Transitional//ENhttp://function init(){_table=document.getElementById(table);_table.border=1px;_table.width=800px;for(va...
js动态添加表(table、行).html
08-24
js动态添加表(table、行).html 点击可直接运行，或查看源码
WEB前端08-综合案例(动态表格)
最新发布
XYX_888的博客
07-20 833
使用 HTML、CSS 和 JavaScript 创建动态表格 在本教程中，我们将创建一个动态表格，允许用户添加行、选择项目，并执行批量操作，如全选或删除选中的行。我们将通过 HTML、CSS 和 JavaScript 来实现这一功能。让我们逐步了解每个部分是如何协同工作的。 HTML 结构 我们的 HTML 文档设置了页面的基本结构： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
html表格动态新增行
NJR10byh的博客
03-07 1686
<div> <table border="1" cellspacing="0" id="patent_table"> <tr> <th>专利名称</th> <th>发明人</th> <th>专利号</th> </tr> </table> .
html生成动态表格（js程序）
10-16
用js代码实现动态生成表格，可输入行数，列数。点击按钮可以生成相对应的表格的小程序
Javascript 在HTML页面中动态添加表格，动态生成行的示例
gfuugfdkkn的博客
02-24 1654
Javascript 在HTML页面中动态添加表格，动态生成行的示例
JavaScript-动态生成表格案例
weixin_43569948的博客
01-14 340
Javascript WebAPI DOM 节点操作之动态生成表格案例 主要复习了节点操作的创建和添加以及删除节点的知识 功能实现：1.添加学生信息 2.删除学生信息 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
JavaScript中动态向表格添加数据
10-20
在JavaScript中，动态向表格添加数据是一项常见的任务，特别是在网页交互和数据展示时。这个过程涉及到HTML、CSS以及JavaScript的基本操作，尤其是DOM（文档对象模型）的操作。以下是对标题和描述中所涉及知识点的...
jQuery+ajax实现动态添加表格tr td功能示例
12-11
在本文中，我们将深入探讨如何使用jQuery和Ajax技术来实现动态添加表格的`<tr>`和`<td>`功能。这个功能通常用于网页上的数据展示，特别是在用户交互时需要实时更新表格内容的情况，例如筛选、搜索或加载更多数据。 ...
JavaScript实现动态生成表格
10-15
在给定的示例中，HTML部分包括两个输入框（id分别为"row"和"col"）用于输入行和列数，以及一个按钮（id为"go"）用于触发生成表格的函数`add()`。 JavaScript部分的核心在于`add()`函数。这个函数首先获取用户在...
案例：动态生成表格.html
06-09
动态生成删除表格，没有相关的数据库，主要是存在数组里面的数据来进行删除，设计的重点主要是对节点的操作
自动在html中使用js添加表格
04-01
就是添加表格行，在html中对表格自动添加行和删除行
动态新增表格一行HTML页面源代码
05-06
动态新增表格一行HTML页面源代码，用js实现的。
动态创建表格(Html格式)
11-22
动态创建表格(Html格式),支持横向统计与纵向统计，支持隐藏表头
html动态添加table行
10-12
实现自动添加table行，增删改查功能统一完成实现，统一提交
Jquery 动态生成表格示例代码
10-26
在这个示例中，我们使用的是jQuery 1.3.2版本，通过`<script>`标签从本地路径引入。确保在使用jQuery功能之前，该库已正确加载。 ```html <script type="text/javascript" src="Scripts/jquery-1.3.2.js"> ``` 接...
JS + HTML 表格动态添加一行
qq_44490330的博客
08-11 8217
JS + HTML 表格动态添加一行 一、使用innerHTML对表格进行添加一行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin: 50px; } a{
自动增加行的表格html,在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript
weixin_34096885的博客
05-30 2674
需求描述：用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示，具体表现如下图：如果如果输入框内容有一项为空，弹出对话框‘请将数据填入完全步骤：1.按钮注册单击事件2.获取并判断文本框的内容4.创建行并添加到tbody中5.创建列，并设置内容6.把列添加到行中代码：1 2 3 4 5 在网页中添加表格6 7 * {8 ma...
使用JavaScript动态创建表格示例
"该资源提供了一个使用JavaScript动态创建表格的示例代码，通过函数addnode()实现在表格中插入新行。代码中还包含了事件监听功能，并使用了页面级变量selectRow来保存选中的行数据。此外，创建的表格单元格内包含了...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值