想要把最后的一行那个操作弄到前面去 在表头的第二个
js
var sFood1 = $('#food1'), sFood2 = $('#food2'), sAge = $('#age'), sSex = $('#sex')
//去掉第一个名列和最后一个操作列
, tdSums = $('#trSum td:gt(0)').not(':last')
, tdAges = $('#trAge td:gt(0)').not(':last')
, tdDiffs = $('#trDiff td:gt(0)').not(':last')
, tbFood = $('#tbFood ')
//初始化食品一级分类及事件
for (attr in food) sFood1.append('<option value="' + attr + '">' + attr + '</option>');
sFood1.change(function () {
var arr = food[this.value];
sFood2.html('');
for (attr in arr) sFood2.append('<option value="' + attr + '">' + attr + '</option>');
}).trigger('change');//触发一级分类加载2级分类
//初始化年龄段
for (attr in age) sAge.append('<option value="' + attr + '">' + attr + '</option>');
sAge.add('#sex').change(function () {
var arr = sAge.val() == '请选择' ? age['请选择'] : age[sAge.val()][sSex.val()];
tdAges.each(function (index) { this.innerHTML = arr[index]; });
updateSumDiff();
});//触发onchange更新trAge中的td数值
function updateSumDiff() {//更新合计和差距
var sum = [];//每营养小计
tbFood.find('tr').each(function () {
$('td:gt(0)', this).not(':last').each(function (index) {
sum[index] = ( parseInt(this.innerHTML) || 0) + parseFloat(sum[index] || 0);
});
});
tdAges.each(function (index) {
var v = ((parseInt(this.innerHTML) || 0) + parseFloat(sum[index] || 0));
tdSums.eq(index).html(v);
v = (parseInt(this.innerHTML) || 0) - parseFloat(sum[index] || 0);
tdDiffs.eq(index).html(v).css('color', v < 0 ? 'red' : 'black');
});
}
function addFood() {
var arr = food[sFood1.val()][sFood2.val()];
var s = '<tr><td>' + sFood2.val() + '</td>';
for (var i = 0; i < arr.length; i++) s += '<td>' + arr[i] + '</td>';
s += '<td><input type="button" value="删除" onclick="removeFood(this)"/></td></tr>';
tbFood.append(s);
updateSumDiff();
$('#div_Test3 tr').each(function() {
$(this).children("td:first").attr("style","color:yellow;")
});
}
function removeFood(o) {
$(o).closest('tr').remove();
updateSumDiff();
}
不明白 看这个网页食物计算
function addFood() {
var arr = food[sFood1.val()][sFood2.val()];
var s = '<tr><td>' + sFood2.val() + '</td><td><input type="button" value="删除" onclick="removeFood(this)"/></td>';/////////////////
for (var i = 0; i < arr.length; i++) s += '<td>' + arr[i] + '</td>';
s += '</tr>';
tbFood.append(s);
updateSumDiff();
$('#div_Test3 tr').each(function() {
$(this).children("td:first").attr("style","color:yellow;")
});
}
addFood也要改
代码看的有点晕,太长了,还是用中文描述详细点比较好。
单纯实现这个的话“想要把最后的一行那个操作弄到前面去 在表头的第二个”,可以得到表头第二个的td,
然后得到删除按钮或者深度克隆删除按钮,放进去就行了,然后删掉删除按钮。
或者之前生成表格的时候判断第几行的第几列然后加个删除
<body>
<table>
<tr><td>tre</td><td>hgfd</td><td></td></tr>
<tr><td>trew</td><td>jy</td><td id="aa"></td></tr>
<tr><td>trew</td><td>uyt</td><td></td></tr>
<tr><td>trew</td><td>khg</td><td><input id="shanchu" type="button" value="delete" onclick="bb(this)"></td></tr>
</table>
</body>
<script>
function bb(e){
$(e).closest("tr").remove();
}
$("#aa").append($("#shanchu"));
var sFood1 = $('#food1'), sFood2 = $('#food2'), sAge = $('#age')
//去掉第一个名列和最后一个操作列
, tdSums = $('#trSum td:gt(1)')////////////////////////////////////
, tdAges = $('#trAge td:gt(1)')////////////////////////////////////
, tdDiffs = $('#trDiff td:gt(1)')////////////////////////////////////
//////
, tbFood = $('#tbFood')
function updateSumDiff() {//更新合计和差距
var sum = [];//每营养小计
tbFood.find('tr').each(function () {
$('td:gt(1)', this).each(function (index) {////////////////////////////////////
sum[index] = (parseFloat(this.innerHTML) || 0) + (sum[index] || 0);
});
});
//更新合计和差距
tdAges.each(function (index) {
tdSums.eq(index).html((parseFloat(this.innerHTML) || 0) + (sum[index] || 0));
tdDiffs.eq(index).html((parseFloat(this.innerHTML) || 0) - (sum[index] || 0));
});
}
新增俩个按钮 第一张上 完了 后面的值就不全了 看第二张