在页面表格中动态增加一行单元格 - 我的技术博客 - ITeye博客

`

shenghw

浏览: 41617 次
性别:
来自: 北京

最近访客更多访客>>

cc221

chenggong1220

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

在页面表格中动态增加一行单元格

博客分类：

JavaScript

阅读更多

<script>
function hideList(obj_id,img)
{
    var obj=document.getElementById(obj_id);
    if(obj.style.display=="none")
{
     obj.style.display="";
     if(img!=null)
     img.src=img.src.replace("hide_b.gif","expand_b.gif");
}else
{
     obj.style.display="none";
     if(img!=null)
     img.src=img.src.replace("expand_b.gif","hide_b.gif");
}
}
function addRow(){
var table=document.getElementById("content_table_left");
var tr=table.getElementsByTagName("tr");
var rowN=tr.length-1;
tableRow=table.insertRow();
tableRow.style.background="white";

tableCell1=tableRow.insertCell(0);
tableCell2=tableRow.insertCell(0);
tableCell3=tableRow.insertCell(0);

tableCell1.align="center";

tableCell1.innerHTML="<input type='hidden' name='supplyList["+rowN+"].enabled'/><input type='hidden' name='supplyList["+rowN+"].changeFlag' id='supplyList["+rowN+"].changeFlag'/><input type='hidden' name='supplyList["+rowN+"].isAdd' id='supplyList["+rowN+"].isAdd'/><input type='checkbox' class='noBorder' checked='checked' onchange='changeCheckBox(this);changeAddRow(this)'/>";
tableCell2.innerHTML="<input type='text' name='supplyList["+rowN+"].description' onchange='changeAddRow(this);' />";
tableCell3.innerHTML="<input type='text' name='supplyList["+rowN+"].supplyCenterCode' onchange='changeAddRow(this);' />";
}
</script>
<html>
<title>test add row</title>
<body>
<div class="c_title_layout"><span><img
src="<app:ContextPath/>/images/expand_b.gif"
onclick="hideList('searchCondition',this);"
width="16" eight="16" align="absbottom">  Search Conditions</span></div>
<DIV class="gap10px"></div>
<div id="searchCondition">

<table width="100%" border="0" align="center" cellpadding="1"
cellspacing="1" class="input_data_table">
<tr class="bg_white">

<td class="input_data_table_td">Supply Center.  <span
style="color:#FF0000;">*</span></td>
<td><input id="inputSearchSupplyCenterCode" name="inputSearchSupplyCenterCode" type="text" value=""/>
</td>
</tr>
</table>
<DIV class="gap10px"></div>
<div style="text-align: center">
<input type="hidden" id="backSearchCondition"/>
<input name="search"
type="button" class="button" value="Search" onclick="validateNull();" id="searchId"/>
   <input name="clear" type="button" class="button"
value="Clear" onclick="clearInfo();" />

</div>
</div>
<div id="resultList">
<input class="button" type="button"
onclick="addRow();" value="  Add  "
id="addButton"/>
<input type="button" class="button" value=" Save " id="saveSubmit"
onclick="saveSubmit1();"/>      
</div>
<table width="100%" border="0" cellpadding="1" cellspacing="1"
id="content_table_left" class="list_data_table">
<tr align="left">
<td class="input_data_table_td" align="left">
<strong>Field1 test1</strong>
</td>
<td class="input_data_table_td" align="left">
<strong>Field2 test2</strong>
</td>
<td class="input_data_table_td" align="center">
<strong>Enabled</strong>
</td>
</tr>
</table>
</body>

分享到：

表格动态增加行2 | oracle查询/删除重复记录

2010-08-23 11:29
浏览 1207
评论(0)
分类:编程语言
查看更多

评论

发表评论

文章已被作者锁定，不允许评论。

相关推荐

js生成动态表格并为每个单元格添加单击事件的方法: 通过循环的方式为每一行和每一列创建相应的元素，并将它们添加到表格中。 ```javascript function setTable(trLineNumber, tdData) { var table = document.getElementById("table"); var row; var cell; for ...

table表格按列合并相同数据行单元格代码: 在jsp、html页面中实现table表格按列合并相同数据行单元格代码，可实现功能为：在一个table表格中，合并指定列中所有相同数据相邻行单元格内容。

JavaScript动态操作表格，添加，删除行、列及单元格: 在本文中，我们将深入探讨如何使用JavaScript来动态地操作表格，包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下，实现灵活的数据管理功能。 1. **创建表格** 在HTML中，我们可以使用`...

JS 实现Table相同行的单元格自动合并示例代码: 如果相同，那么就删除当前行的单元格，并将前一行单元格的`rowSpan`属性增加1。`rowSpan`属性定义了单元格可以跨越多少行。此过程会持续进行，直到遇到一个值与前一行不同的单元格为止。当这种情况发生时，当前的值...

JQuery实现动态表格点击按钮表格增加一行: 在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...

JSP页面中利用C标签动态合并单元格: 在JavaServer Pages (JSP) 开发中，我们经常需要对HTML表格进行操作，比如动态合并单元格。这里，我们将深入探讨如何利用JSP中的C标签（也称为JSTL标签库）来实现这一功能。C标签是JavaServer Pages Standard Tag ...

表格动态插入行: 这将在表格的末尾添加一行，包含"数据1"和"数据2"。为了使用户能够交互式地添加行，我们可能需要将此功能与按钮事件关联起来。例如，我们可以添加一个按钮，并在其点击事件中调用`addRow`： ```html (['新数据1',...

基于jQuery的合并表格中相同文本的相邻单元格的代码: 它通过遍历表格的每一行，比较同一列的相邻单元格内容，如果相同则合并。 - `function _w_table_colspan(_w_table_id, _w_table_rownum, _w_table_maxcolnum)`：此函数用于合并指定行（由`_w_table_rownum`参数...

动态向下合并单元格: 在IT行业中，尤其是在Web开发领域，动态向下合并单元格是一项重要的功能，特别是在处理表格数据时。这个技术主要用于优化用户界面，使数据呈现更加清晰、整洁。"动态向下合并单元格"这一概念通常与HTML表格、...

JavaScript多行文本一行显示，点击可显示单元格全部内容的Table: 【引子】在开发的过程中，表格Table有个缺陷，如果一行中某个单元格的超过一行，表格就不够美观了。下面的代码解决了这个问题：当表格被载入的时候，TD的宽度是原定的长度，不会撑开TD，也不会影响其他TD，点击某...

JS动态增加删除表格行: 当我们谈论动态增加表格行时，我们通常指的是在已有的表格结构中插入新的`<tr>`元素。 ### 1. 动态增加表格行增加表格行通常涉及以下步骤： 1. **获取表格引用**：首先，我们需要获取到表格元素的引用。这可以...

html表格头部固定相应单元格宽度自适应内容区域单元格: 我们可以创建一个包含表头的独立表格，并将其定位在页面的顶部，即使内容区域滚动，表头也会保持在屏幕的固定位置。以下是一个基本的CSS实现步骤： 1. 将表格分为两部分：thead（表头）和tbody（表体）。 2. 使用...

js动态表格合并拆分行: 一个js例子实现了表格的动态合并，拆分单元格

JSP Table 单元格合并: ### JSP Table 单元格合并在网页开发中，表格是展示...综上所述，通过结合 JSP 和 JavaScript 技术，我们可以有效地实现在动态生成的表格中进行单元格合并的功能。这不仅提升了用户体验，也让数据呈现更加直观有序。

javascript 动态创建表格：新增、删除行和单元格.zip: 例如，如果要添加一个新的表格行，我们首先需要获取到`<table>`元素，然后创建一个新的`<tr>`元素，最后使用`appendChild()`将其添加到表格中。 2. `insertRow()`和`insertCell()`：这是专用于表格操作的方法。`...

JavaScript动态操作表格实例(添加,删除行,列及单元格): 本文档主要介绍了如何使用JavaScript来动态操作HTML表格，包括添加、删除表格中的行、列以及单元格。以下是对文档中提及内容的知识点详细说明： ### 标题知识点 1. **JavaScript动态操作表格**：指利用JavaScript...

jquery表格动态添加删除行代码.zip: 这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。首先，让我们了解一下这个功能的核心概念： 1. **HTML结构**：基础的HTML表格由`<table>`元素定义，包括`<thead>`...

table动态添加行并编辑: 使用JavaScript，我们可以根据需求在运行时动态地向表格中添加行。通常涉及以下步骤： 1. 获取表格对象：通过DOM（Document Object Model）接口，如`document.getElementById`或`document.querySelector`来获取`...

利用jquery给指定的table动态添加一行、删除一行的方法: 这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。首先，我们要理解HTML表格的基本结构，一个...

vxe-grid加载页面默认表格选中第一行高亮.vue: vxe-grid加载页面默认表格选中第一行高亮.vue

Global site tag (gtag.js) - Google Analytics