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

How to calculate rows in html table using jquery

本文关键字：html 何使用 jquery 计算      更新时间：2023-09-26

我想按行计算时间。在下面的代码中，只有第一行显示合计和加班。但我希望看到所有的行都做同样的事情。

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/

请帮忙。。。谢谢

您不应该使用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/

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

相关文章：