<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style type="text/css">
container {
width: 996%;
height: 99%;
position: absolute;
top: 05%;
left: 02%;
overflow: auto;
border: 1px outset #d0efe5;
border-radius: 5px;
-moz-border-radius: 5px;
-wekit-border-radius: 5px;
background: #F5F5F5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
table {
width: 600px;
border: solid #add9c0;
border-width: 1px 0px 0px 1px;
}
table th, td {
line-height: 30px;
border: solid #add9c0;
border-width: 0px 1px 1px 0px;
}
table tr {
width: 100%;
margin: 0 auto;
border: none;
overflow: hidden;
color: #2981e4;
font: normal 12px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;
}
center {
text-align: center;
}
table input[type='text'] {
width: 120px;
color: #333;
padding: 4px 5px;
border: 1px solid #e0ecff;
border-radius: 2px;
-o-border-radius: 2px;
-moz-border-radius: 2px;
-wekit-border-radius: 2px;
box-shadow: 0 0 0 2px rgba(255,255, 255, 02);
-o-box-shadow: 0 0 0 2px rgba(255,255, 255, 02);
-webkit-box-shadow: 0 0 0 2px rgba(255,255, 255, 02);
-moz-box-shadow: 0 0 0 2px rgba(255,255, 255, 02);
behavior: url(/PIEhtc);
}
table input[type='text']:focus, table input[type='text']:hover {
border: 1px solid #3aa2d0;
outline: none;
}
</style>
<body>
<div class="container">
<table class="table center" id="myTable">
<tr>
<th>接受场次（场）</th>
<th>接受人次（人）</th>
</tr>
</table>
</div>
<script type="text/javascript">
//数据库中查询的数据
function query(){
var datas = [];
for(var idx = 0;idx < 10; idx ++){
dataspush({
cc : (idx % 3) + 5,
rc : (idx % 3) 5
});
}
return datas;
}
//加载数据(加载时计算Total,输入时计算Total)
function load(datas){
if(datas){
var myTable = documentgetElementById("myTable");
//添加数据行
var rows = "";
var tcc = 0, trc = 0;
for(var idx =0; idx < dataslength; idx ++){
var data = datas[idx];
var cc= parseInt(datacc || "0");
var rc =parseInt(datarc || "0");
tcc = tcc + cc;
trc = trc + rc;
rows = rows + "<tr><td><input type='text' name='cc' value=" + cc + " onkeyup='total(this)'></td><td><input type='text' name='rc' value=" + rc + " onkeyup='total(this)'></td></tr>";
}
myTableinnerHTML = myTableinnerHTML + rows;
//添加total行
var totalRows = "<tr><td id='tcc'>" + tcc + "</td><td id='trc'>" + trc + "</td></tr>";
myTableinnerHTML = myTableinnerHTML + totalRows;
}
}
//求和
function total(obj){
//计算值
var name = objname;
var tv = 0;
var inputs = documentgetElementsByName(name);
for(var idx = 0; idx < inputslength; idx ++){
var ipt = inputs[idx];
tv = tv + parseInt(iptvalue || "0");//这里未处理输入字符问题，要在输入框中限制只能输入数字
}
//设置值
var tid = "t" + name;
var tobj = documentgetElementById(tid);
tobjinnerText = tv;
}
windowonload = function() {
var datas = query();
load(datas);
};
</script>
</body>
</html>
如果用JQuery，代码会少很多，大体的实现原理就在里面，可用根据自己的需求去修改；
js可以用td 对应的id获取该对象
举个例子来说：
<td id="td1"></td>
js：var td=documentgetElementById("td1");
可以用该对象赋予该td的style等属性
如果是要获得<td>苹果</td>里的"苹果"的话用下面的方法
我们把该值放到隐藏域里然后从js取得该值
<td>苹果<input type="hidden" name="pm1" id="pm1" value="苹果"></td>
js：var pm=documentgetElementById("pm1")value;
从字段名称看得出，宽度变化比较大的就是籍贯了，建议你将table的宽度设置成100%，然后里面列不要设置宽度，让其自适应如果不想td中的文字换行，可以在CSS中控制：
td{white-space:nowrap}如果要获取宽度可以用以下js
<table width="300" border="1"><tr>
<td>first td</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td id="c2">td{ white-space:nowrap}</td>
<td> </td>
</tr>
</table>
<script src=">
<input type="text" name="COUNT" value="" itemdesc="数量" onchange=getTotalPrice(this)/>
注意到您的count为text,不太适合使用onchange来触发，这会带来问题。
比如：你的原数量为20，当你想修改为15时，你会：
1、删除20 值变为“”，onchange触发
2、输入1 值变为 1， onchange触发
3、输入5 值变为 15， onchange触发
这样会触发三次，不能满足你触发一次的要求。
应该用onblur来触发。
分析你的业务，你需要计算当前行的，这样可以使用DOM的API来实现
<table border=1>
<tr>
<td>
<input type="text" value="12" onblur="getTotalPrice(this)">
</td>
<td><input type="text" value="13" onblur="getTotalPrice(this)"></td>
<td>
<input type="text" value="25">
</td>
</tr>
<tr>
<td>
<input type="text" value="1" onblur="getTotalPrice(this)">
</td>
<td><input type="text" value="2" onblur="getTotalPrice(this)"></td>
<td>
<input type="text" value="3">
</td>
</tr>
</table>
<script type="text/javascript">
function getTotalPrice(obj){
var c1 = objparentNodeparentNodechildNodes[0]childNodes[0]value;
var c2 = objparentNodeparentNodechildNodes[1]childNodes[0]value;
objparentNodeparentNodechildNodes[2]childNodes[0]value = parseInt(c1) parseInt(c2);
}
</script>
修改前面两个栏，都会自动修改第三栏
相信合你意思，加分吧
//var items = documentgetElementsByTagName("input");
<!-- 楼上牛人：1、指定下标？2、onkeydown -->
//楼主，这还繁？那加分吧，加分定制一个给你
$("table a")click(function(){
var me = $(this);
var txt = meclosest("tr")find("td:first")text();
alert(txt);
});
1、JS获取表格的简便方法：获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells
使用实例： oTabletBodies[0] oTabletHead[0] oTabletFoot[0] oTablerows[1] oTablecells[1]
2、遍历
var oTable=documentgetElementById("表格id");
oTabletBodies[0]可以看成是rows和cells组成的二维数组，用两个for循环嵌套遍历一下就可以了
在a标签上写个class,用jq写的
$("a标签的class")click(function(){
var text = $(this)parent("td")siblings("td")text();
alert(text)
})
以上就是关于js 求table的某列的和全部的内容，包括:js 求table的某列的和、js 或者 jq 获取 Table 里面每一个td 里面的值、js中如何取到table中某一列的宽度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）