https://codepen.io/rurounisena/pen/NeGjyq?editors=1111
$(document).ready(function() {
addTargetClasses();
checkReceived();
});
(function($) {
$(function() {
var orgDates = $('table tr td span');
var message = '';
///////////
orgDates.each(function(i, elem) {
parts = $(this).text().split('/');
dt = new Date(parts[2], parts[0] - 1,parts[1]).getTime();
diffdate = Math.floor((dt - new Date().getTime()) / (86400 * 1000));
if (diffdate === 0 || diffdate === -1) {
return;
}
if (diffdate > 0 || $(this).parents('tr.targetRow').find('lastCell').hasClass('crossout')) {
return;
}
if ((diffdate + 2) < 1) {
if ((diffdate + 2) == 0) {
diffdate = (diffdate + 1) + ' day ago';
}
else {
diffdate = (diffdate + 1) + ' days ago';
}
}
diffdate = diffdate.toString().slice(1);
state = $(elem).parents('.targetTable tr.targetRow').find("td:nth-child(1)").text();
mailType = $(elem).parents('.targetTable tr.targetRow').find(" td:nth-child(2)").text();
message += state + ' ' + mailType + ' was due ' + diffdate + '<br/>';
});
$.alert({
theme: "my-theme",
title: "<span style='font-size:25px;'>" + "</span>",
content: "The following bulk is past the expected received date:"+ "<br/>" + "<br/>" + message,
draggable: true,
animationBounce: 1.5,
buttons: {
Dismiss: function() {
}
}
});
$('span[title*="Bulk Tracking"]').after("<button id='alert_btn' type='button'>See Alerts</button>");
$('#alert_btn').after('<div id="emmacontainer" class="emmacontainer"><div class="container__inner"><div class="subDiv"></div> </div></div>');
$('.subDiv').append(message);
$('#emmacontainer').hide();
$('#alert_btn').click(function(){
$('#emmacontainer').slideToggle(400);
});
})
})
(jQuery);
function addTargetClasses() {
$("table[summary*='Bulk'] ").addClass("targetTable");
$(".targetTable tr").addClass("targetRow");
}
function checkReceived() {
$('.targetTable td.lastCell:contains("Received")').addClass('crossout');
}; .crossout {
text-decoration: line-through;
}
/* popup */
.jconfirm.jconfirm-my-theme .jconfirm-box {
background-color: #fdfdfd;
border: 5px solid #003d5d;
font-family: 'Hind Madurai', sans-serif;
width: 40%;
}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-content{
width: 40%;
border: 2px solid #00b4a9;
padding: 5px;
line-height: 1.4;
}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-buttons button{
background-color: #96989a;
color: #003d5d;
}
/* on click hidden div*/
.emmacontainer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin-left: 20px;
}
.container__inner{
background: #00b4a9;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border: 10px solid #003d5d;
box-sizing: border-box;
}
.subDiv {
background-color: white;
max-height: 80%;
overflow-y: auto;
}
.emmacontainer div {
font-size: 15px;
padding: .5em;
flex: 0 1 auto;
}
#alert_btn {
-moz-box-shadow: 0px 10px 14px -7px #276873;
-webkit-box-shadow: 0px 10px 14px -7px #276873;
box-shadow: 0px 10px 14px -7px #276873;
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
background-color:#00aba9;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:10px;
font-weight:bold;
padding:8px 27px;
text-decoration:none;
text-shadow:0px 1px 0px #3d768a;
margin-left: 20px;
margin-bottom: 5px;
}
#alert_btn:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
background-color:#408c99;
}
#alert_btn:active {
position:relative;
top:1px;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
</head>
<body>
<div class='myDiv'>
<table summary='Bulk Tracking'>
<span title='Bulk Tracking'>Bulk Tracking</span>
<tr>
<td>IL</td>
<td>NR</td>
<td><span class='ms-nowrap'>12/1/2018</span></td>
<td>65</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>TX</td>
<td>FT</td>
<td><span class='ms-nowrap'>12/9/2018</span></td>
<td>22</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>WY</td>
<td>ND</td>
<td><span class='ms-nowrap'>12/25/2018</span></td>
<td>721</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>MT</td>
<td>NR</td>
<td><span class='ms-nowrap'>12/7/2018</span></td>
<td>33</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>AK</td>
<td>LR</td>
<td><span class='ms-nowrap'>12/7/2018</span></td>
<td>222</td>
<td class='lastCell'>Waiting For</td>
</tr>
<tr>
<td>VA</td>
<td>ARR</td>
<td><span class='ms-nowrap'>12/8/2018</span></td>
<td>15</td>
<td class='lastCell'>Received</td>
</tr>
</table>
</div>
</body>
</html>
上面的代码按预期工作。我遍历表中的日期，检查它们是否过期，然后输出带有相关数据的字符串。 问题是，当警报中有很多过期的文本，并且按钮div太长时。所以我希望将相同的日期分组在一起以节省一些空间。例如，代替此：
我希望这样阅读：
我试图遍历each循环中的diffdate var和$ elem，但是我从未得到预期的输出。我对js和jquery比较陌生，因此任何帮助或建议都将不胜感激！
答案 0 :(得分：0)
创建一个中间步骤，而不是添加字符串
“ IL NR将于13天前到期”
为您的结果添加更多有用的内容
[“ IL NR”，-13]
创建一个函数来获取这些结果并将其转换为您要输出的最终字符串（例如，获取输入[“ IL NR”，-13]并输出“ IL NR于13天前到期”），但是仅在您根据每个元素的第二个（过期天数）值合并结果之后