//************************1***************************************
js 对表格进行各种操作
一个对HTML表格进行动态增删改的例子.
<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>
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>
分享到：
发表评论
相关推荐
js简单表格操作，对表格进行增删改，效果可看博客： https://blog.csdn.net/qq_37902949/article/details/81056551
js操作表格 实例 js操作表格 实例 js操作表格 实例
JavaScript操作表格JavaScript操作表格JavaScript操作表格
关于javascript 的表格操作的一些函数集合
使用JS调用动态链接库操作WORD并绘制表格
javascript动态操作表格 1.添加表格 2.删除表格 3.选种表格 4.支持IE6.0和Firefox浏览器
原生JavaScript，对数据表格进行操作，使用DOM实现数据的动态操作，包括增加、删除、查询、修改。
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
包括js动态表格的操作。数据的复制
javascript 表格操作
JS操作表格的代码，动态生成表格和操作表格，里面写的很详细，很完整。
js操作表格，带初始化的 增加，删除很齐全的哦。。
纯JS实现的读取excel文件内容功能。各种电子表格格式的解析器和编写器。
主要介绍了JS实现的表格行上下移动操作,涉及javascript针对页面元素节点与属性的相关操作技巧,需要的朋友可以参考下
现在要通过js对表格进行动态的增删改查（只是内存操作即可）: 首先，加载页面时用js加载3条初始化记录； 有一个增加记录的按钮，点击后弹出一个div层提供输入，要求各字段必须符合输入格式且不能为空： 用户名...
经过多次应用后总结的对表格的经典操作，动态增加行，删除行，全选，删除全部等等...
静态实现javascript，实现表格的增加和删除等功能，值得初学者学习
JavaScript动态操作表格，添加，删除行、列及单元格
js 操作表格动态添加和删除行