table 动态新增输入框 - ITeye问答

问答首页 → Web前端技术

0 0

table 动态新增输入框0

表单中有一个table，想要实现一个动态效果

单击的时候，动态添加行，如何把td单元格的

<input type="text" name="test" />

一同添加进去？

<table border="1" id="t">
			<tr><td><input type="text" name="test"/></td><td><input type="text" name="test1"/></td></tr>
		</table>
		<button onclick="addRow()">+</button>

function addRow(){
   var table = document.getElementById("t");
   var cellNum = table.rows[0].cells;
   var length = cellNum.length;
   var newRow = table.insertRow(0);			
   var i = newRow.insertCell(0);
   var j = newRow.insertCell(1);
   i.innerHTML="hello";
   j.innerHTM="<input type="text" />"//没起作用
}

JavaScript HTML table input

2012年11月08日 14:16

y649459172
0
0 0 4

查看图片附件

3个答案按时间排序按投票排序

0 0

采纳的答案

楼主的这句代码有问题：
j.innerHTM="<input type="text" />"//没起作用

1. innerHTML 漏掉了 L
2. 引号使用错误

更正以后的代码应该像这样：
j.innerHTML="<input type='text' />"//没起作用

2012年11月08日 17:03

nswish
36
0 0 4

2条评论

0 0

是不是方法名写错了啊。

2012年11月08日 15:37

JavaStudyEye
1
0 0 3

1条评论

0 0

如果是IE的话，就不要废力了，firefox,chrome等还可以.

2012年11月08日 14:50

BBjava
170
0 1 14

1条评论

相关推荐

bootstrap table单元格新增行并编辑: Bootstrap Table 单元格新增行并编辑 Bootstrap Table 是一个功能强大且灵活的表格插件，能够帮助开发者快速构建复杂的表格界面。今天，我们将详细介绍 Bootstrap Table 单元格新增行并编辑的相关代码，并对其进行...

bootstrap-table插入可编辑行，文本框形式（非官方自带的）: 还有是初始数据全部可编辑，插入新行也是可编辑的，全部编辑形式是input框里直接编辑，失去焦点触发事件，非官方自带的编辑形式，将页面放到bootstrap-table的demo项目的insertRow.html同目录下即可

elementui加vue.js 生成可输入表格可动态增加列: 当用户编辑时，我们可以监听输入框的`input`事件，同步更新数据源。同时，`<el-table>`还提供了`cell-dblclick`等事件，可用于触发单元格的编辑模式。在`tradeRespMsg.html`文件中，可能包含了HTML结构，包括`<el-...

上下左右键控制table中光标(兼容多浏览器): 本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。首先，我们需要理解...

VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）: 添加一列，这新增的这一列，第一次去赋值的时候值是改了，但没生效点击下一行时值就变过来二、原因横向添加是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题而纵向添加...

通过js动态操作table(新增，删除相关列信息): 在JavaScript中，动态操作HTML表格（table）是常见的任务，特别是在网页交互和数据展示中。以下将详细解释如何通过JS实现动态新增和删除表格的行和列信息。首先，我们需要获取表格对象。在示例中，通过`document....

Bootstrap table中toolbar新增条件查询及refresh参数使用方法: 在 Bootstrap Table 中，我们可以在 toolbar 中添加自定义的查询条件，例如添加输入框、下拉菜单等控件，以便用户输入查询条件。在上面的例子中，我们添加了三个查询条件：产品线、消息类型和消息名称或内容关键字。...

vue iview实现动态新增和删除: 在Vue和iView框架中，动态新增和删除是常见的数据管理功能，特别是在表格或表单中，用户可能需要根据需求动态添加或移除字段。在本案例中，我们将讨论如何利用Vue和iView来实现这一功能。首先，我们需要了解Vue的...

bootstrapTable实例源码: 当用户在表头进行排序或者在输入框中输入筛选条件时，BootstrapTable会自动向服务器发送带有排序和过滤条件的请求，然后更新表格内容。在数据操作方面，BootstrapTable允许我们在表格中添加自定义的行操作。例如，...

react 表格嵌套(主表和子表都可以新增、编辑、保存、删除、主表展开和分页国际化): 表格的每一行可以视为一个`React组件`，每个单元格（TableCell）则作为组件内的小部件。 1. **可编辑表格**：实现表格的编辑功能，通常需要监听单元格的点击事件，当用户点击单元格时，将其切换到编辑模式。编辑...

jquery动态列表的新增、编辑、删除: 动态列表通常是一个可交互的HTML元素集合，如`<ul>`或`<table>`，它们可以实时更新以反映用户的操作。jQuery提供了便利的方法来操作DOM（文档对象模型），使得动态更新列表变得容易。 1. **选择元素**：使用`$()`...

bootstrap table实现双击可编辑、添加、删除行功能: "bootstrap table实现双击可编辑、添加、删除行功能" Bootstrap Table是基于Bootstrap的表格插件，提供了丰富的功能和高效的渲染性能。今天，我们将详细介绍如何使用Bootstrap Table实现双击可编辑、添加、删除行...

javascript 实现输入多行动态输入: - 页面中定义了一个表格`Table1`，用于存放动态生成的数据行。 - 使用`align=center`等属性进行简单的布局设置。 2. **JavaScript动态添加行**： - `tbladdrow()`函数根据当前行数生成新的行，并插入到表格中。 ...

Layui表格行添加编辑删除操作和保存数据代码: 在IT行业中，前端开发经常会遇到需要对表格数据...这个示例主要使用了layui的table和form模块，实现了表格的动态操作和数据保存。实际项目中，你需要根据具体需求对代码进行适当的调整，例如处理数据源、错误处理等。

【JavaScript源代码】element-ui封装一个Table模板组件的示例.docx: - `genTableSlot`函数负责生成表格内容，根据是否有`tableColumn`插槽以及传入的`headers`配置，动态地生成表格列。封装Element-UI的Table组件时，需要考虑以下几点： - 组件的灵活性：确保组件能够接受多种配置...

JQuery实现动态表格点击按钮表格增加一行: 本例中的动态表格操作主要是向`<table>`元素中插入新的`<tr>`元素，以及向`<tr>`中插入新的`<td>`元素。 3. 事件处理：事件处理是交互式网页编程的核心，允许响应用户的操作，例如鼠标点击。这里使用了`onclick`...

js表格操作，DOM实现数据动态增删查改: 3. **动态增加**：当用户点击“添加”按钮时，我们需要获取输入框中的新数据，并创建一个新的表格行。这涉及到创建`<tr>`，`<td>`元素，将数据填充进去，然后将其添加到`<tbody>`元素下。 4. **动态删除**：删除...

Ask-but

我的问答 FAQ | 勋章

相关推荐

已解决问题

未解决问题

排行榜

查看全部排名>>

Global site tag (gtag.js) - Google Analytics