最近帮一个网友做一个ecshop显示颜色和相关商品id，故把后台添加表格的js代码共享，，
js比较简单,可以在ie下运行，firefox无效...
<html>
<head>
<script>
function addRow(){
//添加一行
var newTr = testTbl.insertRow();
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = '颜色名称:<input type="text" name="color[]" size="20" value="" id="box1"/>';
newTd1.innerHTML = '商品ID:<input type="text" name="colorGoodsId[]" /> <input type="button" value="删除行" onclick="delRow()"/>';
}
function delRow(){
//删除行
var delTr = testTbl.deleteRow();
//删除两列
var delTd0 = delTr.deleteCell();
var delTd1 = delTr.deleteCell();
//设置列内容和属性
delTd0.innerHTML = '';
delTd1.innerHTML = '';
}
</script>
</head>
<body>
<form action="postHandle.php" method="post">
<table id="testTbl" border=1>
<tr id="tr1">
<td width=240>
<input type="hidden" name="colorId1" id="colorId1" value="1"/>
颜色名称:<input type="text" name="color[]" size="20" value="" id="box1"/>
</td>
<td id="b">
商品ID:<input type="text" name="colorGoodsId[]"/>
<input type="button" onclick="addRow()" value="添加一行"/>
</td>
</tr>
</table>
<input type="submit" value="提交"/>
</form>
</body>
</html>
- 大小: 9.6 KB
分享到：
相关推荐
"表格删除线"就是这样一个功能，它允许用户在表格中添加删除线，以视觉上标识出已被删除但尚未实际移除的数据行。这样的功能对于版本控制或者协作编辑场景特别有用，因为它提供了明确的修改记录。 首先，让我们来...
bootstrapTable实现表格内数据的添加、删除、修改、查询
通过上述过程，我们了解了如何在Java环境下，利用HTML和JavaScript动态地向表格添加行和列。这种方法增强了网页的动态性和交互性，使得数据展示更加灵活多变，极大地提升了用户体验。同时，这也展示了前后端协同工作...
JavaScript提供了多种方法来实现对表格的增删改查，其中添加和删除行是最基础也是最常用的操作。本文将详细介绍如何使用JavaScript来添加和删除HTML表格中的行。 #### 二、添加行 ##### 1. 使用 `appendChild` ...
在Vue.js应用中，当你需要在执行特定操作如删除或添加数据后刷新页面时，通常前端不会自动更新，因为Vue采用的是数据驱动视图的模式，仅当数据变化时才会更新视图。在这种情况下，我们可以采取手动刷新页面的方法。...
使用javascript实现table动态增加删除行列。
总之，动态追加、插入和删除行是Web开发中常用的功能，通过理解HTML表格结构、JavaScript DOM操作以及可能使用到的前端框架，开发者可以构建出灵活、响应式的用户界面。如果你想要深入了解这一主题，建议查看原文...
"table-rowspan表格自动合并单元格插件"是专为HTML表格设计的一种工具，它允许开发者通过简单的操作实现单元格的动态合并、添加和删除，极大地提升了用户界面的可读性和交互性。以下是对这个插件及相关知识点的详细...
在Vue和Element UI框架下，实现表格的编辑、删除和新增行是常见的需求。这篇文章将介绍一种优化后的最佳实践，旨在提高代码效率和用户体验。在传统的实现方式中，可能需要通过双击单元格来激活编辑模式，而这里我们...
在JavaScript中，我们将动态创建tbody内的tr（行）和td（单元格），同时添加删除行的功能。 1. **获取表格元素**： 使用`document.querySelector`或`document.querySelectorAll`来选取DOM元素。在这个例子中，我们...
- **数据操作**：JavaScript将书籍信息存储在数组或对象中，添加和删除书籍涉及数组的`push()`、`splice()`等方法，而搜索书籍则可能涉及到对数组的遍历和比较。 4. **表单处理**：HTML表单用于收集用户输入，如...
在JavaScript中，动态添加行是一项常见的任务，尤其在构建数据驱动的Web应用时，如表格、列表或表单。这个过程涉及到DOM（Document Object Model）操作，它允许我们通过JavaScript来创建、修改或删除HTML元素。以下...
整体来看，文档提供了在客户端使用JavaScript动态添加表格行的详细方法和步骤，并通过实际代码片段和设计思路，向读者展示了如何在面对复杂表格数据操作需求时，通过模板和标记技术实现更高效和灵活的数据处理。...
4. **添加删除功能**：当用户在某个页签上右键点击时，我们需要获取到被点击的页签对应的索引，然后调用 SpreadJS 的 API 进行删除操作。例如，`spread.sheets.removeAt(index)` 方法可以删除指定索引的工作表。 ``...
动态表格通常结合前端JavaScript库或者自定义脚本来实现，允许用户无须刷新页面就能增加、删除或编辑表格中的数据。 描述中提到的博客链接指向了iteye.com上的一个博客文章，作者是ritaleo。虽然具体内容未给出，但...
在介绍Js实现动态添加和删除表格行（Table Row）的知识点之前，先要了解HTML中的表格（Table）结构以及JavaScript基础操作。HTML中的表格主要由`<table>`标签构成，并包含`<tr>`标签表示的行（Row）和`<td>`标签表示...
本教程主要聚焦于Axure中的“中继器”组件，它是一个强大的动态数据管理工具，能够实现类似数据库的表格操作，如添加、删除和编辑数据。通过"中继器系列视频教程之中继器表格删除数据2"，我们可以深入学习如何在中继...
接着，引入必要的JavaScript库，如jQuery和Bootstrap的JS文件，以及日期选择器插件的JS和CSS文件。在JavaScript部分，编写处理表格编辑、下拉框选择和日期选择的逻辑，包括事件绑定和数据提交处理。 5. **示例代码*...
该组件库的核心在于通过JavaScript API来创建和控制各种基础组件，避免了开发者需要手动编写HTML代码的繁琐工作。这意味着，开发者可以通过简单的编程方式，轻松实现网页内容的动态展示和交互，极大地提高了开发效率...
在这个例子中，我们看到了如何使用jQuery来动态地增加和删除HTML表格中的行。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果。在这个小例子中，主要涉及了以下jQuery知识点： 1. **jQuery...