用jQuery写的第一个程序，用到了append函数，是一次web上机作用

来源：互联网发布：js 金币掉落效果编辑：程序博客网时间：2024/05/15 05:35

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.min.js"></script>
<title>成绩计算表格</title>
<style>
table
{
text-align: center;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3"></td>
<td colspan="4">points</td>
<td colspan="6" rowspan="2">Personal Averge</th>
</tr>
<tr>
<td colspan="2">test1</td>
<td colspan="2">test2</td>
</tr>
<tr>
<td>Math</td>
<td>English</td>
<td>Math</td>
<td>English</td>
<td>Math</td>
<td>English</td>
<td>Test1</td>
<td>Test2</td>
<td>English_Math</td>
<td>等级</td>
</tr>
</table>
<button id="add">add</button">
<button id="calcute">calcute</button>
<script>
var count=1;
$("#add").click(function(){
$("table").append
(
"<tr id="+count+"><th>"+count+"</th><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td><td><input type='text' disabled='disabled'></td><td><input type='text' disabled='disabled'></td><td><input type='text' disabled='disabled'></td><td><input type='text' disabled='disabled'></td><td><input type='text' disabled='disabled'></td><td><input type='text' disabled='disabled'></td></tr>");
count++;
});
$("#calcute").click(function()
{
for(var i=1;i<count;i++)
{
var inputArr=$("#"+i).find("input");
inputArr[4].value=(parseFloat(inputArr[0].value)+parseFloat(inputArr[2].value))/2;
inputArr[5].value=(parseFloat(inputArr[1].value)+parseFloat(inputArr[3].value))/2;
inputArr[6].value=(parseFloat(inputArr[0].value)+parseFloat(inputArr[1].value))/2;
inputArr[7].value=(parseFloat(inputArr[2].value)+parseFloat(inputArr[3].value))/2;
inputArr[8].value=(parseFloat(inputArr[6].value)+parseFloat(inputArr[7].value))/2;
inputArr[9].value=dengji(inputArr[8].value);
}
});
function dengji(b)
{
var t;
if(b>=90&&b<=100)
t='A';
else if(b<=89&&b>=80)
t= 'B';
else if(b<=79&&b>=60)
t= 'C';
else
t= 'D';
return t;
}
</script>
</body>
</html>

0 0