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 ...
随机推荐
- 利用git+hugo+markdown 搭建一个静态网站
利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...
- New Concept English 1-10
Lesson 10 The loss of Titanic The great ship, Titanic, sailed for New York from Southampton on April ...
- Android使用ndk-stack获取so奔溃堆栈
利用NDK做开发,因为各种原因的不小心,导致了闪退问题,没有stack的话,很难查到问题的所在.这时候ndk-stack出场了. 先看看如下DUMP信息: ********** Crash dump: ...
- [SQL入门级] 第一天 SQL初步
SQL语句分为以下三种类型: DML:Data Manipulation Language 数据操纵语言 INSERT UPDATE DELETE SELECT DDL:Data Definition ...
- Solr5 DataImport 处理1对多关系
“问题” 和“派发处理” 是2个对象. 每个问题可以被派发N次, 最后结束问题. 实际查询中数据量可能很大,同时即可以从问题查派发部门, 也可以从派发情况查询问题(如本部门处理的问题) 使用的技巧就是 ...
- java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener
参考: http://www.cnblogs.com/sunxucool/archive/2013/06/07/3124380.html ---------------------------&g ...
- MVC5+EF6 入门完整教程
MVC5+EF6 入门完整教程11--细说MVC中仓储模式的应用 MVC5+EF6 入门完整教程10:多对多关联表更新&使用原生SQL@20150521 MVC5+EF6 入门完整教程9:多表 ...
- 山东省第七届ACM省赛------Julyed
Julyed Time Limit: 2000MS Memory limit: 65536K 题目描述 Julyed is preparing for her CET-6. She has N wor ...
- C# 正则表达式小坑 -- not enough
今天遇到了一个奇怪的报错: 相关的代码是这样的: Regex regex = new Regex("(?<=wwwroot\\).*?$"); 然后把这段正则复制到任何正则测 ...
- Windows 版本的iTunes 修改iPhone的备份路径
帮朋友解决修改iPhone的备份路径问题,故写篇博客整理记录一下. 所需工具 Junction工具 下载该工具然后将文件放到C:\Windows 目录下,如下图: 找到iTunes的备份路径 Wind ...