js table 添加行 取出内容 例子

最新推荐文章于 2020-03-30 11:31:14 发布
最新推荐文章于 2020-03-30 11:31:14 发布
阅读量425 收藏
点赞数 2
文章标签： table input function div html button
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liang6688/article/details/5393995
版权

<!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>table add</title>
<script type="text/javascript">
 var GL_indx=1;
 function bulkProduction(){
  var tab=document.getElementById("tab");
  addTR("tab",GL_indx);
  GL_indx++;
 }
 
 function addTR(tabId,indx){
       var tab = document.getElementById(tabId); //获得表格对象（主要是表格内容）
       var tab_len = tab.rows.length;
       var i = tab_len;   //i 从0开始
       var new_row = tab.insertRow(i);//该对象是表格中最后一行的新增行
       var the_cell;
   
       //第一列
       the_cell = new_row.insertCell(0);
       the_cell.innerHTML= "00"+indx;
       //第二列
       the_cell = new_row.insertCell(1);
       the_cell.innerHTML= "<div align='center'><input id='cat"+indx+"' type='text' size='12' value='cat"+indx+"'/></div>";
       //第三列
       the_cell = new_row.insertCell(2);
       the_cell.innerHTML= "<div align='center'><select id='country'><option value='中国'>中国</option><option value='美国'>美国</option></select></div>";
     //第四列
       the_cell = new_row.insertCell(3);
       the_cell.innerHTML= "<div align='center' ><input id='count"+indx+"' type='text' size='12' value='count"+indx+"'/></div>";
 }
 
 function dataCapture(){
  var tab = document.getElementById("tab");//获得表格对象（主要是表格内容）
  var tab_len = tab.rows.length;//获得表格的总行数
  var rows_innerText="";
  
  for(var i=1;i<tab_len;i++){
    rows_innerText = rows_innerText + tab.rows[i].cells[0].innerText+"  "+document.getElementById("cat"+(i)).value+"  "+document.getElementById("country").value+"  "+document.getElementById("count"+(i)).value;
   rows_innerText = rows_innerText+";/n" ;
   
  }
  alert(rows_innerText);
 }
</script>
</head>

<body>

<div align="center">
  <p>
    <input type="button"　name="Submit" value="批量创建" onClick="bulkProduction()">&nbsp;&nbsp;&nbsp;
    <input type="Submit"  name="Submit2" value="保存" onClick="dataCapture()">
</p>
  <p>&nbsp;  </p>
</div>

<table id="tab"align="center">
  <tr>
    <td>Id</td>
    <td>猫名（text）</td>
    <td>类型（下拉）</td>
    <td>数量（text）</td>
  </tr>
</table>
</body>
</html>

liang6688
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
纯JS table动态增加行
Everyone_boy的博客
08-21 7780
JS代码： function addRow(tableId) { var tb=document.getElementById(tableId); var tbRows=tb.rows; var newTr=tb.insertRow(tbRows.length); newTr.align="center"; var newTd0=newTr.insertCell(0); var newTd1=newTr.insertCell(1); var newTd2=newTr.insertCel
js、table表格 插入、新增、删除自定义行
qiang928的博客
11-19 2296
js、table表格 插入、新增、删除自定义行
js动态添加表(table、行).html
08-24
js动态添加表(table、行).html 点击可直接运行，或查看源码
table JS 添加行和删除行
06-07
table JS 添加行和删除行 实现JS添加table的一行和删除一行技术
js 控制table 新增一行或一列
aa_moon的专栏
12-02 7671
New Document   function ss(){    var subtable = document.getElementById('subject_tab');    var i=subtable.rows.length;    var addrow=subtable.insertRow();//添加一行到第一行的位置行    var col1=add
从数据库中取出最近三十天的数据并生成柱状图
12-15
在这个例子中，我们将探讨如何从数据库中检索最近30天的数据，并使用JavaScript生成柱状图。这个过程涉及到了几个关键的步骤，包括项目创建、Action和Model的建立以及前端图表的渲染。 首先，我们看到使用了`zf ...
5X5的HTML方格实例
08-22
它创建了一个5行5列的表格（table），每个单元格（td）代表一个方格。HTML代码可能类似于这样： ```html <table id="grid"> <tr><td></td><td></td><td></td><td></td><td></td></tr> <!-- 重复4次以创建5行 --...
Kettle循环获取结果集中的数据并传入转换里面
01-08
否则，将结果集存储为ArrayList类型的变量`tables`，并将表名分别保存在`table1`, `table2`等数组中。 3. **数据计数与控制**： `parent_job.setVariable("size", prevRow.size());`用来记录结果集中行的数量，...
C#将Json解析成DateTable的方法
09-03
// 添加行数据 DataRow dr = table.NewRow(); foreach (string columnName in columnNames) { string cellValue = row[columnName].ToString().Replace(",", ""); dr[columnName] = cellValue; } table.Rows...
js动态给表格添加一行、删除一行
热门推荐
rmkloveme
10-30 1万+
最近写代码遇到这个需求，特地总结了一下写了个demo，如下所示： 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;new document&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=g
利用js实现table增加一行
zw_82的专栏
08-24 3712
"http://www.w3.org/TR/html4/loose.dtd"> var rowid=1; function $(id){  return document.getElementById(id); } function addRow(){  var _tab=$("test");  var _row=_tab.insertRow();  rowid+=1;  var _col1=_r
如何将一个数据表中的内容插入到另一个表中
09-27 2928
一般我们在对一个表进行插入的时候通常用的方法时：insert into table_name values(列名称,列名称....);  可是把一个表中的数据插入到另一个表中用的方法却不是这个样子的，而是：insert into table_name1 select 列名称，列名称... from table_name2;
JS操作页面表格内容的添加与删除
周梦康的代码碎片
01-04 1016
HTML DOM //定义一个删除一行信息函数 function doDel(bt){ document.getElementById("tid").deleteRow(bt.parentNode.parentNode.rowIndex); } function doAdd(myform){ //获取要添加的信息 var id=myfo
js table 添加行 删除行 复制行
本事记的富伟徐
07-08 172
无标题文档 Item Item No Nickname Cleats / Flat Upper / Out Size Qty Net Price Actual Price Amount Price Action ...
javascript中给table添加新的行列
秋尾鸣的博客
03-24 1万+
原生JS：&lt;script&gt; var t = document.getElementById("test"); t.innerHTML = "&lt;tr&gt;&lt;td&gt;数据&lt;/td&gt;&lt;/tr&gt;"; //或者 var t = document.getElementById("test"); var tr = docume
js实现table添加行tr、删除行tr、清空行tr
听海Movie的专栏
08-22 9752
//得到选中行对象 function findObj(theObj, theDoc) { var p, i, foundObj; if(!theDoc) theDoc = document; if( (p = theObj.indexOf("?")) > 0 && parent.frames.length) { theDoc = parent.frames[theObj.su
web开发学习笔记（4）：js获取table的行数和表格中某一行某一列的内容
生活没有if-else
05-02 9049
js获取table的行数和表格中某一行某一列的内容
js中动态添加表格新行
Keep on moving!
03-30 422
var tableNode = window.opener.document.getElementById("fileTable"); // 获取原表格长度，添加新行 var row = tableNode.insertRow(tableNode.rows.length); // 设置新行id row.id = 'newId';...
js table添加行
最新发布
06-02
可以通过 JavaScript 操作 DOM 来向表格添加行。下面是一个简单的示例： ```html <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>30</td> <td>Male</td> </tr> <tr> <td>Jane</td> <td>25</td> <td>Female</td> </tr> </tbody> </table> <button onclick="addRow()">Add Row</button> ``` 在上述代码中，我们创建了一个`table`元素，并且在表格中添加了一个表头和两行数据。接下来是 JavaScript 代码： ```javascript function addRow() { const table = document.getElementById('myTable'); const row = table.insertRow(-1); // 在表格的最后一行插入新行 const nameCell = row.insertCell(0); // 插入单元格并设置单元格内容 const ageCell = row.insertCell(1); const genderCell = row.insertCell(2); nameCell.innerHTML = 'Tom'; ageCell.innerHTML = '28'; genderCell.innerHTML = 'Male'; } ``` 在这个函数中，我们首先获取表格元素的引用，然后使用`insertRow()`方法在表格的最后一行插入新行。接下来，我们使用`insertCell()`方法在新行中插入单元格，并设置单元格的内容。最后，我们将新行添加到表格中。当用户点击添加行按钮时，调用该函数即可向表格中添加新的一行数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值