在网页设计中,表格是非常常用的元素,而jQuery作为一款强大的Javascript库,拥有许多方便的API可以操作表格,以下是使用jQuery计算表格总成绩的代码示例:
<code ><table id="score"><thead><tr><th>学生姓名</th><th>数学成绩</th><th>语文成绩</th><th>英语成绩</th></tr></thead><tbody><tr><td>小明</td><td>80</td><td>90</td><td>85</td></tr><tr><td>小红</td><td>75</td><td>95</td><td>80</td></tr></tbody></table>
以上是一个成绩表格,包括学生姓名、数学成绩、语文成绩和英语成绩。现在我们需要使用jQuery计算表格中学生的总成绩:
<code >$(document).ready(function(){// 获取数学、语文、英语成绩列var mathScores = $('#score tbody td:nth-child(2)');var chineseScores = $('#score tbody td:nth-child(3)');var englishScores = $('#score tbody td:nth-child(4)');// 初始化总成绩为0var totalScore = 0;// 循环计算每个学生的总成绩mathScores.each(function(index, element){var mathScore = parseFloat($(this).text());var chineseScore = parseFloat(chineseScores.eq(index).text());var englishScore = parseFloat(englishScores.eq(index).text());var studentTotalScore = mathScore + chineseScore + englishScore;totalScore += studentTotalScore;});// 在表格底部添加总成绩行$('#score tbody').append('<tr><td colspan="4">总成绩:' + totalScore + '</td></tr>')});
以上代码首先获取了数学、语文、英语成绩列,然后使用each()方法循环计算每个学生的总成绩,再将所有总成绩加起来得出总成绩,并将其添加到表格底部。
是不是非常简单方便呢?这就是jQuery的魔力所在。