`

js 对表格进行各种操作

    博客分类：
  • JS
J#JavaScript.net 
阅读更多
//************************1***************************************
js 对表格进行各种操作

一个对HTML表格进行动态增删改的例子. 


<TABLE width="500" border="1" id="t" onKeyUp="sum(this)" onClick="setPos(this)"> 
<TR> 
<TD><div contentEditable>项目\部门</div></TD> 
<TD><div contentEditable>部门1</div></TD> 
<TD><div contentEditable>部门2</div></TD> 
<TD><div contentEditable>部门3</div></TD> 
<TD><div contentEditable>统计</div></TD> 
</TR> 
<TR> 
<TD><div contentEditable>货物1</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div>0</div></TD> 
</TR> 
<TR> 
<TD><div contentEditable>货物2</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div>0</div></TD> 
</TR> 
<TR> 
<TD><div contentEditable>货物3</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div>0</div></TD> 
</TR> 
<TR> 
<TD><div contentEditable>货物4</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div>0</div></TD> 
</TR> 
<TR> 
<TD><div contentEditable>货物5</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div contentEditable>0</div></TD> 
<TD><div>0</div></TD> 
</TR> 
<TR> 
<TD><div contentEditable>总计</div></TD> 
<TD><div>0</div></TD> 
<TD><div>0</div></TD> 
<TD><div>0</div></TD> 
<TD><div>0</div></TD> 
</TR> 
</TABLE
>
<input type="button" value="加一行" onClick="insertRow(document.all.t)">
<input type="button" value="加一列" onClick="insertCell(document.all.t)">
<input type="button" value="删除行" onClick="deleteRow(document.all.t)">
<input type="button" value="删除列" onClick="deleteCell(document.all.t)">
<input type="button" value="正序排列" onClick="ascRow(document.all.t)">
<input type="button" value="反序排列" onClick="descRow(document.all.t)">
<br>
<input type="button" value="横向正序排列" onClick="ascCell(document.all.t)">
<input type="button" value="横向反序排列" onClick="descCell(document.all.t)">
<input type="button" value="全部数据统计" onClick="getSum(document.all.t,'total')">
<input type="text" value="0" name="total" style="width:50">
<SCRIPT LANGUAGE="JavaScript">
<!--
var currRow="0";
var currCell="0";
function getSum(obj,objName){
var sum=0;
for(var i=1;i<obj.rows.length-1;i++){
for(var j=1;j<obj.rows[i].cells.length;j++){
sum+=parseInt(obj.rows[i].cells[j].innerText);
}
}
document.getElementsByName(objName)[0].value=sum;
}

//正序排列
function ascCell(obj){
if(currCell>=1&&currRow>=1){
var len=obj.rows[0].cells.length;
for(var j=0;j<len;j++){
var order=0;
for(var i=1;i<len-2;i++){
if(parseInt(obj.rows[currRow].cells[i].innerText)>parseInt(obj.rows[currRow].cells[i+1].innerText)){
for(var k=0;k<obj.rows.length;k++){
var tmp=obj.rows[k].cells[i].innerHTML;
obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
obj.rows[k].cells[i+1].innerHTML=tmp;
}
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}

//反序排列
function descCell(obj){
if(currCell>=1&&currRow>=1){
var len=obj.rows[0].cells.length;
for(var j=0;j<len;j++){
var order=0;
for(var i=1;i<len-2;i++){
if(parseInt(obj.rows[currRow].cells[i].innerText)<parseInt(obj.rows[currRow].cells[i+1].innerText)){
for(var k=0;k<obj.rows.length;k++){
var tmp=obj.rows[k].cells[i].innerHTML;
obj.rows[k].cells[i].innerHTML=obj.rows[k].cells[i+1].innerHTML;
obj.rows[k].cells[i+1].innerHTML=tmp;
}
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}

//正序排行
function ascRow(obj){
if(currCell>=1){
var rows=obj.rows;
var len=rows.length-2;
for(var j=0;j<=rows.length-2;j++){
var order=0;
for(var i=1;i<len;i++){
if(parseInt(rows[i].cells[currCell].innerText)>parseInt(rows[i+1].cells[currCell].innerText)){
obj.moveRow(i,i+1);
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}

//反序排行
function descRow(obj){
if(currCell>=1){
var rows=obj.rows;
var len=rows.length-2;
for(var j=0;j<rows.length-2;j++){
var order=0;
for(var i=1;i<len;i++){
if(parseInt(rows[i].cells[currCell].innerText)<parseInt(rows[i+1].cells[currCell].innerText)){
obj.moveRow(i,i+1);
order++;
}
}
len--;
if(order==0){
break;
}
}
}
clear();
}

//删除行
function deleteRow(obj){
var rows=obj.rows.length;
if(currRow>=1&&currRow<rows-1){
obj.deleteRow(currRow);
}
clear();
averCol(obj);
}

//删除列
function deleteCell(obj){
if(currCell>=1&&currCell<obj.rows[0].cells.length-1){
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].deleteCell(currCell);
}
}
clear();
averCol(obj);
}


function averCol(obj){
var wh=obj.width;
var cells=obj.rows[0].cells;
for(var i=0;i<cells.length;i++){
cells[i].width=Math.ceil(wh/cells.length);
}
}
function insertRow(obj){
if(currRow>=0&&currRow<obj.rows.length-1){
var maxCell=obj.rows[0].cells.length;
obj.insertRow(currRow+1);
for(var i=0;i<maxCell;i++){
obj.rows[currRow+1].insertCell(i);
obj.rows[currRow+1].cells[i].innerHTML="<div contentEditable>0</div>";
}
clear();
averCol(obj);
chnBgcolor(obj,currRow,"ffffff");
}
}
function insertCell(obj){
if(currCell&&currCell!=obj.rows[0].cells.length-1){
for(var i=0;i<obj.rows.length;i++){
obj.rows[i].insertCell(currCell+1);
obj.rows[i].cells[currCell+1].innerHTML="<div contentEditable>0</div>";
}
clear();
averCol(obj);
chnBgcolor(obj,currRow,"ffffff");
}
}
function check(obj){
var k=parseInt(obj.innerText);
if(isNaN(k)){
obj.childNodes[0].innerText=0;
return 0;
}
else{
obj.childNodes[0].innerText=k;
return k;
}
}
function sum(obj){
var o=event.srcElement;
var total=0;
var tindex=obj.rows.length-1;
if(o.parentElement.tagName=="TD"&&o.parentElement.cellIndex>=1&&o.parentElement.parentElement.rowIndex>=1){
var index=o.parentElement.cellIndex;
var pindex=o.parentElement.parentElement.rowIndex;
for(var i=1;i<tindex;i++){
var num=check(obj.rows[i].cells[index]);
total=parseInt(total)+num;
}
var total1=0;
for(i=1;i<obj.rows[pindex].cells.length-1;i++){
total1+=check(obj.rows[pindex].cells[i]);
}
obj.rows[pindex].cells(obj.rows[pindex].cells.length-1).innerText=total1;
obj.rows[tindex].cells[index].innerText=total;
obj.rows[tindex].cells(obj.rows[0].cells.length-1).innerText=addAll(obj);
}
setPos(obj);
}
function chnBgcolor(obj,index,color){
for(var i=0;i<obj.rows.length;i++){
if(i==index){
obj.rows[i].bgColor=color;
}
else{
obj.rows[i].bgColor="ffffff";
}
}
}
function setPos(obj){
var o=event.srcElement;
if(o.tagName=="DIV"){
currRow=o.parentElement.parentElement.rowIndex;
currCell=o.parentElement.cellIndex;
chnBgcolor(obj,currRow,"dedede");
}
else if(o.tagName=="TD"){
currRow=o.parentElement.rowIndex;
currCell=o.cellIndex;
}
else{
currRow=obj.rows.length-1;
currCeil=obj.rows[0].cells.length-1;
}
}
function clear(){
currRow=0;
currCell=0;
}
function addAll(obj){
var total=0;
for(var i=1;i<obj.rows[0].cells.length-1;i++){
total+=parseInt(obj.rows[obj.rows.length-1].cells[i].innerText);
}
return total;
}
//-->
</SCRIPT>


//************************1***************************************
js对表格进行操作，获取单元格的值

//****************************2*************************************
code1

<script>
var j=0
function add_row(){
j++
//j=sqd.rows.length;
newRow=document.all.sqd.insertRow(-1)
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML=j
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=SerialNumber type=radio value="+j+">"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=SerialNumber1 type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=ProductName type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=jianshu type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=Quantity type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=GrossWeight type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=CountWeight type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=UnitPrice type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=Amount type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=CustOrder type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=Discription type=text class=INPUT1 size=3>"
}
function del_row() {
for(i=1;i<sqd.rows.length;i++){
alert(sqd.rows(i).cells[1].interHTML)
}
}
</script>
<table id="sqd" width="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
<tr bgcolor="#BAC2DA">
<td height="25"> <div align="center">序号</div></td>
<td> <div align="center">选中</div></td>
<td> <div align="center">货物编号</div></td>
<td> <div align="center">货物品名</div></td>
<td> <div align="center">件数</div></td>
<td> <div align="center">数量</div></td>
<td> <div align="center">毛重</div></td>
<td> <div align="center">计货重量</div></td>
<td> <div align="center">费率</div></td>
<td> <div align="center">金额</div></td>
<td> <div align="center">客户定单号</div></td>
<td> <div align="center">备注</div></td>
</tr>
</table>
<br/> <input name="Submit5" type="button" onClick=add_row() class="button" value=" 添 加 ">
<input name="Submit33" onclick=del_row() type="button" class="button" value=" 替换 ">
<input type=button onclick="alert(sqd.rows[sqd.rows.length - 1].cells[0].innerText)" value="Get Value">

code2

<script>
//The JavaScript Source!! http://smallrain.net
var j=0
function add_row(){
k=j+1
j=sqd.rows.length;
newRow=document.all.sqd.insertRow(-1)
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML=j
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=Number type=radio >"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=SerialNumber type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=ProductName type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=PieceNo type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=Quantity type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=GrossWeight type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=CountWeight type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=UnitPrice type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=Amount type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=CustOrder type=text class=INPUT1 size=3>"
newcell=newRow.insertCell()
newcell.style.backgroundColor='#f7f7f7'
newcell.innerHTML="<input name=Description type=text class=INPUT1 size=3>"
}
function del_row() {
if(sqd.rows.length==1) return;
var checkit = false
for (var i=0;i<document.all.Number.length;i++) {
if (document.all.Number[i].checked) {

checkit=true;
sqd.deleteRow(i)
break;
}
}

if (checkit) {

for(i=1;i<sqd.rows.length;i++){
sqd.rows[i].cells[0].innerText=i
}


} else
{
alert("请选择一个要删除的对象");
return false}

}
</script>
<table width=90% border=0 align="center" cellpadding=2 cellspacing=1 bgcolor="#FFFFFF">
<tr>
<td height="25" class="table1">
<div align="center"><font color="#FFFFFF"><strong>≡≡≡ 货 运 单 概 要 ≡≡≡</strong></font></div></td>
</tr>
<tr>
<td align=center valign=top bgcolor=f7f7f7><table id="sqd" width="90%" border="0" cellpadding="0" cellspacing="1" bgcolor="#999999">
<tr bgcolor="#BAC2DA">
<td height="25">
<div align="center">序号</div></td>
<td>
<div align="center">选中
<input name=Number type=hidden >
</div></td>
<td>
<div align="center">货物编号</div></td>
<td>
<div align="center">货物品名</div></td>
<td>
<div align="center">件数</div></td>
<td>
<div align="center">数量</div></td>
<td>
<div align="center">毛重</div></td>
<td>
<div align="center">计货重量</div></td>
<td>
<div align="center">费率</div></td>
<td>
<div align="center">金额</div></td>
<td>
<div align="center">客户定单号</div></td>
<td>
<div align="center">备注</div></td>
</tr>
</table>
<br>
<input name="Submit5" type="button" onClick=add_row() class="button" value=" 添 加 ">
<input name="Submit33" onclick=del_row() type="button" class="button" value=" 删 除 ">
</td>
</tr>
</table>


code3

<html>
<head>
<title>实例代码 - 使用JavaScript和DOM创建HTML表格</title>
<script>
function start() {
//获取body标签
var mybody = document.getElementsByTagName("body")[0];
// 创建一个<table>元素和一个<tbody>元素
table1 = document.createElement("table");
mytablebody = document.createElement("tbody");
//创建所有的单元格
myArray = new Array('this','is','a','test');
for(var j = 0; j <4; j++) {
// 创建一个<tr>元素
mycurrent_row = document.createElement("tr");
for(var i = 0; i <4; i++) {
// 创建一个<td>元素--列
mycurrent_cell = document.createElement("td");
//创建一个文本节点
if(j==0){
currenttext = document.createTextNode(myArray[i]);
}else if(i==0){
currenttext = document.createTextNode(myArray[j]);
}else {currenttext = document.createTextNode();
}
mycurrent_cell.appendChild(currenttext);
// 将列<td>添加到行<tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// 将行<tr>添加到<tbody>
mytablebody.appendChild(mycurrent_row);
}
// 将<tbody>添加到<table>
table1.appendChild(mytablebody);
//将<table>添加到<body>
mybody.appendChild(table1);
table1.setAttribute("border", "2");
table1.setAttribute("cellspacing", "3");//无效 ？？
table1.setAttribute("cellpadding", "2");//无效 ？？
}
</script>
</head>
<body onload="start()">
</body>
</html>
分享到：
| Lazy load
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js简单表格操作

    在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`&lt;table&gt;`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    js实现对表格的增删查改

    "js实现对表格的增删查改"这个主题，就是关于如何利用JavaScript来管理HTML表格中的数据，提供用户友好的数据操作功能。 首先，我们来理解HTML表格的基本结构。一个HTML表格由`&lt;table&gt;`标签开始，`&lt;tr&gt;`标签定义每...

    js操作表格

    js操作表格 实例 js操作表格 实例 js操作表格 实例

    JS操作Word生成表格

    在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...

    javascript实现表格添加删除等操作

    3. **表格操作**： - **创建新行**：要向表格添加行，首先需要创建一个新的`&lt;tr&gt;`元素，然后创建`&lt;td&gt;`元素并设置其内容。最后，将这些元素添加到表格的`&lt;tbody&gt;`标签内。 - **删除行**：通过获取行的引用（例如，...

    JavaScript操作表格

    本篇内容主要介绍了使用JavaScript进行表格操作的方法，包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术，可以实现更加灵活的...

    纯js电子表格操作

    "纯js电子表格操作"这个主题涉及到使用JavaScript处理电子表格数据，如读取、解析、修改和生成Excel文件。下面将详细探讨相关的知识点。 1. **js-xlsx库**： js-xlsx是JavaScript的一个开源库，专门用于处理Excel...

    javascript动态操作表格

    总的来说，JavaScript动态操作表格涉及创建、删除、选择和更新表格元素，这些都需要对DOM有深入理解。在实际应用中，还要考虑浏览器兼容性，特别是对于较旧的浏览器，如IE6和早期的Firefox版本。通过合理使用...

    javascript经典表格操作

    在JavaScript编程领域，表格操作是常见的任务之一，特别是在构建数据密集型Web应用程序时。本教程主要聚焦于如何使用JavaScript进行一些经典的操作，如动态增加行、删除行、实现全选功能以及清除全部数据等。这些...

    JS实现的表格行上下移动操作示例

    总结来说，通过本示例，我们可以学习到如何使用JavaScript来对HTML表格进行行的上下移动操作，包括了获取节点、遍历节点和节点交换等基础DOM操作，这些知识对于进行页面动态交互设计是至关重要的。

    js操作表格的方法介绍

    在JavaScript中，操作表格是一种常见的任务，特别...通过不断学习和实践，你可以熟练掌握JavaScript操作表格的各种技巧。参考提供的博文链接（https://zyz.iteye.com/blog/1743610），可以获取更多详细信息和示例代码。

    js表格操作，DOM实现数据动态增删查改

    通过以上步骤，你可以实现一个基本的基于DOM的JavaScript表格数据操作系统。这个系统可以适应各种数据管理需求，为用户提供直观的界面和流畅的操作体验。在实际项目中，可能还需要处理更复杂的交互逻辑，如表单验证...

    js操作表格， 带初始化的

    在JavaScript编程中，操作表格是一项常见的任务，尤其是在网页交互和数据展示方面。...通过实践和查阅相关资源，你可以进一步提升在JavaScript表格操作方面的技能。记住，持续学习和实践是成为IT行业大师的关键。

    js动态表格--行操作

    "js动态表格--行操作"这个主题主要涵盖了如何使用JavaScript来创建、修改和管理表格的行。下面我们将详细探讨这些知识点。 首先，我们需要理解HTML表格的基本结构，包括`&lt;table&gt;`,`&lt;tr&gt;`,`&lt;th&gt;`和`&lt;td&gt;`等元素。`...

    JS DOM 表格操作

    1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考

    Js表格操作

    包括js动态表格的操作。数据的复制

    JS操作表格代码CRUD操作(很完整)

    在JavaScript（JS）中操作HTML表格是Web开发中常见的任务，尤其在实现CRUD（创建、读取、更新、删除）操作时。本教程将深入探讨如何使用纯JS实现这一功能，无需依赖任何外部库，如jQuery或Angular。 首先，我们需要...

    js简单的表格操作

    在JavaScript中进行简单的表格操作是Web开发中常见的需求，它涉及到HTML、CSS和JavaScript的结合。这篇博文将探讨如何利用JavaScript来创建、编辑和操作HTML表格。首先，我们需要理解HTML表格的基本结构，它由`...

Magicbox
Global site tag (gtag.js) - Google Analytics