物聯網行動商務實務: dytable

加一列

<script language="javascript">
function fun1()
{
var x=document.getElementById("tb1");
var y=x.insertRow(0);
for(var i=0;i<5;i++)
{
var z=y.insertCell(i);
z.innerHTML=(i+1);
}
}
</script>

<body onload="fun1()">
<table id="tb1" border="2" width="800">
</table>
</body>
==========================
加三列
function fun1()
{
var x=document.getElementById("tb1");

for(var j=0;j<3;j++)
{
var y=x.insertRow(j);
for(var i=0;i<5;i++)
{
var z=y.insertCell(i);
z.innerHTML=(i+":"+j);
}
}
}
</script>

<body onload="fun1()">
<table id="tb1" border="2" width="800">
</table>
</body>
======================================
刪除一列
function fun1()
{
var x=document.getElementById("tb1");

for(var j=0;j<3;j++)
{
var y=x.insertRow(j);
for(var i=0;i<5;i++)
{
var z=y.insertCell(i);
z.innerHTML=(i+":"+j);
}
var t=y.insertCell(5);
t.innerHTML="<a href='javascript:;' onclick='fun2(this)' >刪除</a>";
}
}
function fun2(x)
{
var t=x.parentNode.parentNode.rowIndex;
//alert(t);
document.getElementById("tb1").deleteRow(t);
}
</script>

<body onload="fun1()">
<table id="tb1" border="2" width="800">
</table>
==================
取值
<script language="javascript" src="jquery-3.1.1.min.js" ></script>
<script language="javascript">
function fun1()
{
var x=document.getElementById("tb1");

for(var j=0;j<3;j++)
{
var y=x.insertRow(j);
for(var i=0;i<5;i++)
{
var z=y.insertCell(i);
z.innerHTML=(i+":"+j);
}
var t=y.insertCell(5);
t.innerHTML="<a href='javascript:;' onclick='fun2(this)' >刪除</a>";
var t1=y.insertCell(6);
t1.innerHTML="<a id='"+j+"' href='javascript:;' onclick='fun3(this.id)' >修改</a>";
}
}
function fun2(x)
{
var t=x.parentNode.parentNode.rowIndex;
//alert(t);
document.getElementById("tb1").deleteRow(t);
}
function fun3(y)
{
var trow=$("#tb1 tr:eq('"+y+"') td").length-2;
alert(trow);
var data1=$("#tb1 tr:eq('"+y+"') td:eq(0)").text();
var data2=$("#tb1 tr:eq('"+y+"') td:eq(1)").text();
var data3=$("#tb1 tr:eq('"+y+"') td:eq(2)").text();
var data4=$("#tb1 tr:eq('"+y+"') td:eq(3)").text();
var data5=$("#tb1 tr:eq('"+y+"') td:eq(4)").text();
var alldata="data1:"+data1+" data2:"+data2+" data3:"+data3+" data4:"+data4+" data5:"+data5;
alert(alldata);
}
</script>

<body onload="fun1()">
<table id="tb1" border="2" width="800">
</table>
</body>
================
<!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" />
<title>無標題文件</title>
</head>
<script language="javascript">
var tb=1;
function fun1()
{
var id,na="";
var v3,v4,v5,v6,sm,ag=0;

id=document.getElementById("t1").value;
na=document.getElementById("t2").value;
v3=parseInt(document.getElementById("t3").value);
v4=parseInt(document.getElementById("t4").value);
v5=parseInt(document.getElementById("t5").value);
v6=parseInt(document.getElementById("t6").value);

sm=v3+v4+v5+v6;
ag=sm/4;

document.getElementById("t7").value=sm;
document.getElementById("t8").value=ag;

var x=document.getElementById("tb2");

var y=x.insertRow(tb);

var z1=y.insertCell(0);

z1.innerHTML=id;

var z2=y.insertCell(1);
z2.innerHTML=na;
var z3=y.insertCell(2);
;
z3.innerHTML=document.getElementById("t3").value;
var z4=y.insertCell(3);
z4.innerHTML=document.getElementById("t4").value;
var z5=y.insertCell(4);
z5.innerHTML=document.getElementById("t5").value;
var z6=y.insertCell(5);
z6.innerHTML=document.getElementById("t6").value;
var z7=y.insertCell(6);
z7.innerHTML=document.getElementById("t7").value;
var z8=y.insertCell(7);
z8.innerHTML=document.getElementById("t8").value;
tb=tb+1;

}
function fun2() {
document.getElementById("t1").value="";
document.getElementById("t2").value="";
document.getElementById("t3").value="";
document.getElementById("t4").value="";
document.getElementById("t5").value="";
document.getElementById("t6").value="";
document.getElementById("t7").value="";
document.getElementById("t8").value="";
}
</script>

<body>
<form id="f1" name="f1">
<table id="tb1" width="500">
<tr>
<td>學號：</td>
<td>
<input type="text" id="t1" name="t1" size="20" />
</td>
<td>姓名：</td>
<td>
<input type="text" id="t2" name="t2" size="20" />
</td>
</tr>
<tr>
<td>國文：</td>
<td>
<input type="text" id="t3" name="t3" size="20" />
</td>
<td>英文：</td>
<td>
<input type="text" id="t4" name="t4" size="20" />
</td>
</tr>
<tr>
<td>數學：</td>
<td>
<input type="text" id="t5" name="t5" size="20" />
</td>
<td>地理：</td>
<td>
<input type="text" id="t6" name="t6" size="20" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" id="bt1" name="bt1" value="計算" onclick="fun1()" />
</td>
<td colspan="2" align="center">
<input type="button" value="清除" onclick="fun2()" />
</td>
</tr>
<tr>
<td>總分：</td>
<td>
<input type="text" id="t7" name="t7" size="20" />
</td>
<td>平均：</td>
<td>
<input type="text" id="t8" name="t8" size="20" />
</td>
</tr>

</table>
<table id="tb2" width="500">
<tr>
<td>學號</td>
<td>姓名</td>
<td>國文</td>
<td>英文</td>
<td>數學</td>
<td>地理</td>
<td>總分</td>
<td>平均</td>
</tr>
</table>
</form>
</body>
</html>

物聯網行動商務實務

2017年1月9日星期一

dytable

沒有留言:

張貼留言

2017年1月9日 星期一

dytable

沒有留言:

張貼留言

2017年1月9日星期一