如何使用jQuery计算HTML表格中的行

Question

我想按行计算时间。 在下面的代码中，仅第一行显示了总计和加班。 但我想看到所有行都一样。

HTML：

<table border=1>
<tr><th>Time In</th><th>Time Out</th><th>Lunch</th><th>After Lunch Time in</th><th>After Lunch Time out</th><th>Total Hours</th><th>Overtime</th> </tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
<tr><td><input type="time" id="start" name="logintime"/></td>
<td><input type="time" id="end"name="logouttime" /></td>
<td><input type="time" id="lunch" name="lunch" /></td>
<td><input type="time" id="startafterlunch" name="afterlunchlogin"/></td>
<td><input type="time" id="endafterlunch" name="afterlunchlogout"/></td>
<td><input id="totalTime" readonly="readonly" /></td>
<td><input id="overTime" readonly="readonly" /></td></tr>
</table>

Javascript：

$(document).ready(function(){
var $time1 = $("#start");
var $time2 = $("#end");
var $time3 = $("#lunch");
var $time4 = $("#startafterlunch");
var $time5 = $("#endafterlunch");
var $diff = $("#totalTime");
var $over = $("#overTime");

function updateHours(){   

    var dtStart = new Date("7/20/2015 " + $time1.val());
    var dtEnd = new Date("7/20/2015 " + $time2.val());
    var dtLunch= new Date("7/20/2015 " + $time3.val());
    var dtStartafterlunch = new Date("7/20/2015 " + $time4.val());
    var dtEndafterlunch = new Date("7/20/2015 " + $time5.val());

    var diff = ((dtEnd - dtStart)+(dtEndafterlunch-dtStartafterlunch)) / 1000;

    var totalTime = 0;
    var overTime = 0;

    if (diff > 60*60*8) {

        overTime = formatDate(diff - 60*60*8);
    } else {
        totalTime = formatDate(diff);
    }
    totalTime = formatDate(diff);
    $diff.val(totalTime);
    $over.val(overTime);
}

function formatDate(diff){
    var hours = parseInt( diff / 3600 ) % 24;
    var minutes = parseInt( diff / 60 ) % 60;
    var seconds = diff % 60;

    return (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds  < 10 ? "0" + seconds : seconds);
}

$("#start, #end, #lunch, #startafterlunch, #endafterlunch, #totalTime").on("change, keyup", function(){
    if($time1.val() && $time2.val() && $time4.val() && $time5.val()){
        updateHours();
    }
});
});

http://jsfiddle.net/dpk11/9f66wef7/

请帮助...谢谢！

Answer 1

您不应该使用id属性。 id属性应仅用于页面中的唯一元素。 使用$('#...')选择器时，即使页面中有多个对应的元素，jQuery也会始终返回一个元素。

此外， updateHours方法应在修改后的输入的行中接受参数，以便它可以恢复输入值并计算总时间：

function updateHours(row){   
    var $time1 = row.find('[name="logintime"]');
    var $time2 = row.find('[name="logouttime"]');
    var $time3 = row.find('[name="lunch"]');
    var $time4 = row.find('[name="afterlunchlogin"]');
    var $time5 = row.find('[name="afterlunchlogout"]');
    var $diff = row.find('.totalTime');
    var $over = row.find('.overTime');

    ...
}

工作提琴： http : //jsfiddle.net/9f66wef7/2/

Answer 2

您没有任何可区分行的标记。 您有5个不同的行，但是每个输入都具有与最后一行中的可比较输入相同的ID。 当选择ID时，Jquery只关心它找到的第一个。 我的建议是在输入中添加一个keyup事件侦听器，然后触发一个遍历每个TR元素并计算子输入值的函数。