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元素的函数，并计算子输入的值。

如何使用jquery计算html表中的行

2 个答案: