JS控制TABLE表格在任意一行下面添加一行（有待完善）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<script language="javascript">
//动态添加删除table行
var rowIndex = 0;
aaa=function(id){return (typeof(id)=='object')?id:document.getElementById(id);}
function add() {
var row=aaa("tb").insertRow(aaa("tb").rows.length);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
col2 = row.insertCell(2);
col0.width="300px"; //控制TD样式
//向TD插入内容
col0.innerHTML ="<tr name='btn' index=\""+ rowIndex +"\">" +
"<input id='work1"+rowIndex+"' value='"+rowIndex+"' name='work1"+rowIndex+"' type='text' class='work1'/>";
col1.innerHTML ="<input type='button' value='添加' onclick=\"return AddRow('row" + rowIndex +"')\">";
col2.innerHTML ="<input type='button' value='删除' onclick=\"return DeleteRow('row" + rowIndex +"')\"></tr>";
row.setAttribute("id", "row" + rowIndex);
row.setAttribute("name", "row" + rowIndex);
rowIndex++;
}
function DeleteRow(rowTag){ //删除
var i = aaa("tb").rows[rowTag].rowIndex;
//alert(i);
//alert(rowIndex);
var j;
//for(j=i;j<=rowIndex;j++) {
//$("tb").rows[j].index--;
//}
aaa("tb").deleteRow(i);
rowIndex--;
}
function getRow(){
}
function AddRow(rowTag){ //删除
var i = aaa("tb").rows[rowTag].rowIndex;
//alert(rowIndex);
for(var j=rowIndex; j>i+1; j--){
var p=j-1;
var nnn="work1"+j;
var mmm="row"+j;
document.getElementById('work1'+p).id=nnn;
//row.setAttribute("id", "row" + y);
}
var x=i+1;
alert(x);
var row=aaa("tb").insertRow(i+1);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
col2 = row.insertCell(2);
col0.width="300px"; //控制TD样式
//向TD插入内容
col0.innerHTML ="<tr name='btn' index=\""+ x +"\">" +
"<input id='work1"+x+"' value='"+x+"' name='work1' type='text' class='work1'/>";
col1.innerHTML ="<input type='button' value='添加' onclick=\"return AddRow('row" + x +"')\">";
col2.innerHTML ="<input type='button' value='删除' onclick=\"return DeleteRow('row" + x +"')\"></tr>";
row.setAttribute("id", "row" + x);
row.setAttribute("name", "row" + x);
rowIndex++;
}
var TrArray1 = new Array();
var TrArray2 = new Array();
function getDongtai(){ //获取动态列表值到域
var itemsLength = rowIndex;//行数
//alert("itemsLength"+itemsLength);
//第一列
var sum="";
for (var i = 0; i < itemsLength; i++) {
//TrArray1[i] =document.getElementsByClassName('work1')[i].value;
TrArray1[i] =document.getElementById('work1'+i).value;
//sum.push(TrArray1[i]);
sum = sum + TrArray1[i]+"*";
}
alert(TrArray1);
}
function showTable(){ //审批、结束环节的展示
//第一列
//var text1=document.getElementById("Text1").value;
var showTd1= new Array();
//第二列
//var text2=document.getElementById("Text2").value;
var showTd2= new Array();
//var tbHTML1 = "<table><tbody>";
//for(var i=0;i<showTd1.length - 1;i++){
//tbHTML1=tbHTML1+"<tr><td>"+showTd1[i]+"</td><td>"+showTd2[i]+"</td></tr>";
//}
//tbHTML1=tbHTML1+"</table></tbody>";
//alert(tbHTML1);
//document.getElementById("#{id:tb1}").value = tbHTML1;
for(var i=0;i<TrArray1.length;i++){
var row=aaa("tb1").insertRow(aaa("tb1").rows.length);
col0 = row.insertCell(0);
col1 = row.insertCell(1);
//col2 = row.insertCell(2);
col0.width="300px"; //控制TD样式
col1.width="300px";
col0.style.wordWrap="break-word";
col1.style.wordWrap="break-word";
col0.style.fontSize="18px";
col1.style.fontSize="18px";
col0.style.fontFamily="FangSong";
//向TD插入内容
col0.innerHTML ="<tr name='btn' index=\""+ i +"\">" +
"<td id='wan1"+i+"'>"+TrArray1[i]+"</td>";
col1.innerHTML ="<td>"+TrArray2[i]+"</td></tr>";
row.setAttribute("id", "row" + i);
row.setAttribute("name", "row" + i);
}
}
//style="position:absolute ;top:-1px;left:0px;border-collapse:collapse;"
</script>
</head>
<body>
<p>
<input name="btnAddLine" type="button" id="btnAddLine" onClick="return add()" value="加入一行">
<input name="btnAddLine1" type="button" id="haha" onClick="return getDongtai()" value="取数">
<input name="btnAddLine2" type="button" id="haha1" onClick="return showTable()" value="show">
</p>
<table border="" cellspacing="" cellpadding="">
<tr>
<td>
<div>
<table name="tb" id="tb" >
</table>
</div>
</td>
</tr>
<tr>
<td>
<div id="one" style=" width:1030px;height:auto;min-height:50px;padding-top:0px;overflow:auto;" >
<table frame="void" border="1" cellspacing="0" cellpadding="0" bordercolor="black" name="tb1" id="tb1" width="1030px" style="border-collapse:collapse; ">
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
JS控制TABLE表格在任意一行下面添加一行（有待完善）的更多相关文章
- 第十三篇 JS 操作table表格
JS 操作table表格 这节课难度可能高一点,因为没有提前解释if判断.for循环.这节课是直接把这两样用上了,老师先简单介绍一下: if,判断语句,判断就很简单了嘛,假如说1=1(1等于1),当然 ...
- js创建table表格
//js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- 原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- JS获取table表格任意单元格值
jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...
- element+vue点击新增表格内在已有数据添加一行带输入框内容
在element+vue项目中,需求要表格内已有数据,点击新增在首行添加一行带输入框内容 table的数据为datas=[],那么下面是一列的数据,多列可循环或复制 <el-table-colu ...
- html table表格列数太多添加横向滚动条
HTML的table表格的列数如果太多或者某一列的内容太长,就会导致表格td的内容被挤压变形,对后台的使用体验非常不友好.比如下面的情况: 那么如何在表格列数较多的情况下添加横向滚动条?其实很简单,只 ...
- JS实现table表格在鼠标移动出现一行变色或者十字叉变色
1,一行变色 <script> function trBg(){ var tab=document.getElementById("table"); var tr=ta ...
- 纯JS 将table表格导出到excel
html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...
随机推荐
- node 异步编程
node 异步编程 我了解到的node异步编程可分成: 1.回调函数 2.pub/sub模式(发布/订阅模式) 3.promise 4.generator 5.async await 一.直接回调函数 ...
- C#获取EF实体对象或自定义属性类的字段名称和值
在年前上班的时候遇到了一个问题是这样描述的:我前台设计一个页面,是标签和文本框,当用户修改了哪个文本框的值,将该修改前的值.修改后的值,该值对应的字段,该值对应的行id获取到保存到数据库的某张表里.现 ...
- lua 基础 2 类型和值
-- 类型 和 值--[[ 8中类型 滚动类nil.boolean. number.string.userdata.function.thread 和 table.]] print (type(&qu ...
- [转]Android SDK更新 Connection to http://dl-ssl.google.com refused 解决方法
问题描述 使用SDK Manager更新时出现问题Failed to fetch URL https://dl-ssl.google.com/android/repository/repository ...
- java实现ftp文件的上传与下载
最近在做ftp文件的上传与下载,基于此,整理了一下资料.本来想采用java自带的方法,可是看了一下jdk1.6与1.7的实现方法有点区别,于是采用了Apache下的框架实现的... 1.首先引用3个包 ...
- Linux部署Apache Solr5.5.2+Apache Zookeeper3.4.6
一.官网下载所需包. solr-5.5.2.tgz 下载地址:https://mirrors.tuna.tsinghua.edu.cn/apache/lucene/solr/5.5.2/ zookee ...
- 【日常小记】linux中强大且常用命令：find、grep【转】
转自:http://www.cnblogs.com/skynet/archive/2010/12/25/1916873.html 在linux下面工作,有些命令能够大大提高效率.本文就向大家介绍fin ...
- EBS learning history (to know about the environment)
prcsgidb1: /u01/Stage/database C:\Users\alley_li>ping prcsgidb1 Pinging prcsgidb1.ad.infosys.com ...
- c++中的<<函义
1.一个是左移运算:x = 4<< 2; 2.输出流运算:cout <<x;//X的值输出流到设备中.
- Mysql查询重复记录
第一步 使用group by 和 having cout 查找重复字段 SELECT t1.`order_book_id` FROM `quant_stock_info` t1 GROUP BY t1 ...