从 html 表格单元格运行 javascript

Question

我正在使用 asp.net core 5，并且我在表格中有以下单元格 -

<td id="actionId" class="text-left">
   <input hidden id="renewalDueId" type="hidden" asp-for="@clinic.RenewalDue" class="form-control" />
   <input hidden id="nextRenewalDueAtId" asp-for="@clinic.VaccClinic.NextRenewalDueAt" class="form-control" />
   <input hidden id="dedesignatedDateId" asp-for="@clinic.VaccClinic.DedesignationDate" class="form-control" />

   <div id="designationPlaceHolderHere"></div>

   Training Status: <br /><br />
   Annual Returns Figures:
   @if (clinic.NumberOfVaccinations.HasValue)
   {
      <label>@clinic.NumberOfVaccinations.Value.ToString()</label>

      if (clinic.NumberOfAdverseEvents.HasValue)
      {
         <label> - @clinic.NumberOfAdverseEvents.Value.ToString()</label>
      }
      else
      {
        <label> - 0</label>
      }
   }
   else
   {
      <label style="background-color:red">
         Not Submitted
      </label>
   }
</td>

我正在尝试调用 javascript 函数并在指定占位符处为表中的每条记录添加 html。

我试过了-

$('tr').each(function (i, item) {
    var html = DesignationStatus($('#dedesignatedDateId').val(), $('#renewalDueId').val(), $('#nextRenewalDueAtId').val(), @(ViewBag.NumberOfDays));
    $('#designationPlaceHolderHere').html(html);
});

不能正常工作。

我想为每条记录调用该函数，为每条记录传递适当的值。

有什么想法吗？

谢谢

[更新]

这是我调用的函数-

function DesignationStatus(dedesignatedDate, renewalDue, nextRenewalDue, numberOfDays) {

    var isRenewalDue = (renewalDue === 'true')

    //Get today's date
    var d = new Date();
    var month = d.getMonth() + 1;
    var day = d.getDate();

    var todaysDate = d.getFullYear() + '/' +
        (month < 10 ? '0' : '') + month + '/' +
        (day < 10 ? '0' : '') + day;

    //Create next renewal due date display value.
    var reDate = new Date(nextRenewalDue);
    var reDay = reDate.getDate();
    var reMonth = reDate.getMonth() + 1;

    var displayRenewalDate = (reDay < 10 ? '0' : '') + reDay + '/' + (reMonth < 10 ? '0' : '') + reMonth + '/' + reDate.getFullYear()

    //Create de-designation date display value.
    var deDate = new Date(dedesignatedDate);
    var deDay = deDate.getDate();
    var deMonth = deDate.getMonth() + 1;

    var displayDedesignationDate = (deDay < 10 ? '0' : '') + deDay + '/' + (deMonth < 10 ? '0' : '') + deMonth + '/' + deDate.getFullYear()

    //Calculate what one day is
    var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds

    //Parse the number off days passed in
    var numOfDays = parseInt(numberOfDays);

    //If no number has been passed in set to default of 90.
    if (isNaN(numberOfDays)) {
        numOfDays = 90;
    }

    //Start html string
    var html = '<div>'
    html += '         <label>Designation status:</label>'
    html += '     </div>'
    html += '     <div>'

    //Get rest of html dependant on due date etc.
    if (dedesignatedDate != null && dedesignatedDate != "") {
        html += '         <div class="alert alert-danger" role="alert" style="text-align : center; height : 47.5px;">'
        html += '             <label>De-designated on</label>' + ' ' + displayDedesignationDate
    }
    else {
        if (nextRenewalDue != null && nextRenewalDue != "") {
            var today = new Date();
            var renewal = new Date();

            today = Date.parse(todaysDate);
            renewal = Date.parse(nextRenewalDue);

            if (renewal > today) {
                if (!isRenewalDue) {
                    html += '         <div class="alert alert-success" role="alert" style="text-align : center; height : 47.5px;">'
                    html += '             <label>Active</label>'
                }
                else {
                    html += '        <div class="alert alert-warning" role="alert" style="text-align : center; height : 47.5px;">'
                    html += '              <label>Due to renew - renew before </label>' + ' ' + displayRenewalDate
                }
            }
            else if (renewal < today) {

                //Work out the number of days between renewal and today's date
                var diffDays = Math.round(Math.abs(((new Date(today).getTime()) - (new Date(renewal).getTime())) / (oneDay)));

                if (diffDays < numOfDays) {
                    html += '         <div class="alert alert-danger" role="alert" style="text-align : center; height : 47.5px;">'
                    html += '              <label>Inactive - lapsed on </label>' + ' ' + displayRenewalDate;
                }
                else {
                    html += '         <div class="alert alert-danger" role="alert" style="text-align : center; height : 47.5px;">'
                    html += '              <label>Inactive</label>'
                }
            }
        }
    }

    //Finish off the html string
    html += '         </div>'
    html += '     </div>'
    html += '</div>'

    //return html strin
    return html
}

Answer 1

<td id="actionId" class="text-left" onclick="DesignationStatus('@clinic.VaccClinic.DedesignationDate','@clinic.RenewalDue','@clinic.VaccClinic.NextRenewalDueAt','@ViewBag.NumberOfDays')">
<input hidden id="renewalDueId" type="hidden" asp-for="@clinic.RenewalDue" class="form-control" />
<input hidden id="nextRenewalDueAtId" asp-for="@clinic.VaccClinic.NextRenewalDueAt" class="form-control" />
<input hidden id="dedesignatedDateId" asp-for="@clinic.VaccClinic.DedesignationDate" class="form-control" />

<div id="designationPlaceHolderHere"></div>

Training Status: <br /><br />
Annual Returns Figures:
@if (clinic.NumberOfVaccinations.HasValue)
{
   <label>@clinic.NumberOfVaccinations.Value.ToString()</label>

   if (clinic.NumberOfAdverseEvents.HasValue)
   {
      <label> - @clinic.NumberOfAdverseEvents.Value.ToString()</label>
   }
   else
   {
     <label> - 0</label>
   }
}
else
{
   <label style="background-color:red">
      Not Submitted
   </label>
}

这应该调用您的 javascript 函数。也永远不要使用相同的 id="dedesignatedDateID"。