jquery 表格控制
时间：2009-04-11
来源：互联网
col1 col2 col3
1 2 3
4 5 6
x x x
===========
要将x的值设置 前面列的和
怎么做 多谢指教
1 2 3
4 5 6
x x x
===========
要将x的值设置 前面列的和
怎么做 多谢指教
作者: zjackz 发布时间: 2009-04-11
试一下可以的,你再根据自己的需求优化一下
<!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>
<title>无标题页</title>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var total=0;
for(var i=1;i<=$("table tbody tr:first td").length;i++)
{
$("table tbody tr td:nth-child("+i+"):not(:first):not(:last)").each(function(){
total+=parseInt($(this).text());
});
$("table tbody tr:last td").eq(i-1).text(total);
total=0;
}
});
</script>
</head>
<body>
<table class="style1">
<tr>
<td>
a</td>
<td>
b</td>
<td>
c</td>
</tr>
<tr>
<td>
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr>
<td>
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr>
<td>
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
<!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>
<title>无标题页</title>
<style type="text/css">
.style1
{
width: 100%;
}
</style>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var total=0;
for(var i=1;i<=$("table tbody tr:first td").length;i++)
{
$("table tbody tr td:nth-child("+i+"):not(:first):not(:last)").each(function(){
total+=parseInt($(this).text());
});
$("table tbody tr:last td").eq(i-1).text(total);
total=0;
}
});
</script>
</head>
<body>
<table class="style1">
<tr>
<td>
a</td>
<td>
b</td>
<td>
c</td>
</tr>
<tr>
<td>
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr>
<td>
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr>
<td>
1</td>
<td>
2</td>
<td>
3</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</body>
</html>
作者: seekarmor 发布时间: 2009-04-11
thank 在看
作者: zjackz 发布时间: 2009-04-11
我把text()改成了html()可行。。可能是jquery版本问题。。
但不知道是什么意思：$("table tbody tr td:nth-child("+i+"):not(:first):not(:last)")
高手指点...
但不知道是什么意思：$("table tbody tr td:nth-child("+i+"):not(:first):not(:last)")
高手指点...
作者: vip 发布时间: 2009-04-11
i等于几，就代表第几列。查查API会看明白的
作者: seekarmor 发布时间: 2009-04-11
这样麻烦啊,这个用el表达式容易多了.
作者: mumianii 发布时间: 2009-04-13
引用
引用第5楼mumianii于2009-04-13 09:55发表的 :
这样麻烦啊,这个用el表达式容易多了.
这样麻烦啊,这个用el表达式容易多了.
敢问达人,可否明示?
作者: seekarmor 发布时间: 2009-04-13
<table border="1" width="950" id="table1" cellspacing="0" bordercolor="#808080" style="border-collapse: collapse">
<tr id="tr_header1">
<td rowspan="2" align="center" width="83"><b><font size="2">单位</font></b></td>
<td rowspan="2" align="center" class="style1">aaa</td>
<td colspan="6" align="center" >xxx</td>
</tr>
<tr id="tr_header2">
<td align="center" >xxx</td>
<td align="center" ><b><font size="2">xxx_1</font></b></td>
<td align="center" ><b><font size="2">xxx_2</font></b></td>
<td align="center" ><b><font size="2">xxx_3</font></b></td>
<td align="center"><b><font size="2">xxxx_4</font></b></td>
<td align="center" ><b><font size="2">xxxx_5</font></b></td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位1 </td>
<td class="style1">1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位2 </td>
<td class="style1">1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td></td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
<p style="margin-top: 0; margin-bottom: 0"><b><font size="2">合计</font></b></td>
<td class="style1">2</td>
<td>4</td>
<td>6</td>
<td>4</td>
<td>3</td>
<td>8</td>
<td>8</td>
</tr>
</table>
<tr id="tr_header1">
<td rowspan="2" align="center" width="83"><b><font size="2">单位</font></b></td>
<td rowspan="2" align="center" class="style1">aaa</td>
<td colspan="6" align="center" >xxx</td>
</tr>
<tr id="tr_header2">
<td align="center" >xxx</td>
<td align="center" ><b><font size="2">xxx_1</font></b></td>
<td align="center" ><b><font size="2">xxx_2</font></b></td>
<td align="center" ><b><font size="2">xxx_3</font></b></td>
<td align="center"><b><font size="2">xxxx_4</font></b></td>
<td align="center" ><b><font size="2">xxxx_5</font></b></td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位1 </td>
<td class="style1">1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位2 </td>
<td class="style1">1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td></td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
<p style="margin-top: 0; margin-bottom: 0"><b><font size="2">合计</font></b></td>
<td class="style1">2</td>
<td>4</td>
<td>6</td>
<td>4</td>
<td>3</td>
<td>8</td>
<td>8</td>
</tr>
</table>
作者: zjackz 发布时间: 2009-04-14
看看代码结构感觉不好,你自己再改改吧
<!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>
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var total=0;
for(var i=1;i<=$("table tbody tr:last td:not(:first)").length;i++)
{
$("table tbody tr:gt(1) td:nth-child("+(i+1)+"):not(:last)").each(function(){
total+=parseInt($(this).text()||0);
});
$("table tbody tr:last td").eq(i).text(total);
total=0;
}
});
</script>
</head>
<body>
<table border="1" width="950" id="table1" cellspacing="0" bordercolor="#808080" style="border-collapse: collapse">
<tr id="tr_header1">
<td rowspan="2" align="center" width="83"><b><font size="2">单位</font></b></td>
<td rowspan="2" align="center">aaa</td>
<td colspan="6" align="center" >xxx</td>
</tr>
<tr id="tr_header2">
<td align="center" >xxx</td>
<td align="center" ><b><font size="2">xxx_1</font></b></td>
<td align="center" ><b><font size="2">xxx_2</font></b></td>
<td align="center" ><b><font size="2">xxx_3</font></b></td>
<td align="center"><b><font size="2">xxxx_4</font></b></td>
<td align="center" ><b><font size="2">xxxx_5</font></b></td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位1 </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位2 </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td></td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
<p style="margin-top: 0; margin-bottom: 0"><b><font size="2">合计</font></b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
<!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>
<title>无标题页</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
var total=0;
for(var i=1;i<=$("table tbody tr:last td:not(:first)").length;i++)
{
$("table tbody tr:gt(1) td:nth-child("+(i+1)+"):not(:last)").each(function(){
total+=parseInt($(this).text()||0);
});
$("table tbody tr:last td").eq(i).text(total);
total=0;
}
});
</script>
</head>
<body>
<table border="1" width="950" id="table1" cellspacing="0" bordercolor="#808080" style="border-collapse: collapse">
<tr id="tr_header1">
<td rowspan="2" align="center" width="83"><b><font size="2">单位</font></b></td>
<td rowspan="2" align="center">aaa</td>
<td colspan="6" align="center" >xxx</td>
</tr>
<tr id="tr_header2">
<td align="center" >xxx</td>
<td align="center" ><b><font size="2">xxx_1</font></b></td>
<td align="center" ><b><font size="2">xxx_2</font></b></td>
<td align="center" ><b><font size="2">xxx_3</font></b></td>
<td align="center"><b><font size="2">xxxx_4</font></b></td>
<td align="center" ><b><font size="2">xxxx_5</font></b></td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位1 </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
单位2 </td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>2</td>
<td></td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td height="30" align="center" width="83">
<p style="margin-top: 0; margin-bottom: 0"><b><font size="2">合计</font></b></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
[ 此帖被seekarmor在2009-04-14 11:42重新编辑 ]
作者: seekarmor 发布时间: 2009-04-14
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
