Wie schreibe ich JavaScript/jQuery für den Vorschaubereich auf der SharePoint 2010-Website?

Question

Ich habe JavaScript-Code zu einem Inhalts-Editor-Webpart hinzugefügt, um die Farben von Datumsangaben in einer Liste zu beeinflussen. Die Liste ist mit dem Vorschaufenster Design eingerichtet und es gibt mehrere Einträge, auf die der JavaScript-Code angewendet werden muss.

Das Javascript wählt die Daten aus und entscheidet, ob das Datum basierend auf der Beziehung zum heutigen Datum grün, gelb oder rot sein muss. Das JavaScript funktioniert korrekt beim ersten Eintrag, der im Vorschaufenster angezeigt wird, wenn er geladen wird, aber die Farben ändern sich nicht wie benötigt, wenn andere Einträge ausgewählt sind. Was muss ich in meinem JavaScript hinzufügen/ändern, um die JavaScript-Bearbeitung auf JEDEN Eintrag einzeln in der Liste anzuwenden? Hier

ist, was die Liste wie auf der Seite aussieht:

The list on the page

Hier ist das JavaScript, das in einer Content-Editor-Webpart verwendet wird:

<script src="/agencies/wtc/cop/wtctasks/SiteAssets/jquery-1.8.1.min.js"></script><script> 

$(document).ready(
function() 
{ 
     $("div.ms-ppleft table tr td.ms-vb-title").trigger("onfocus"); 
} 
) 




//Added by Philip Speroni on April 22, 2016 to apply color styling to dates that are within 30 days of the current date 


_spBodyOnLoadFunctionNames.push("FormatDates"); 

function FormatDates() 
{ 
var contentTable = document.getElementById("MSO_ContentTable"); 
var tables = contentTable.getElementsByTagName("TABLE"); 
var formTable; 

// find the table we need to work with 

for (i = 0; i < tables.length; i++) 
{ 
    if (tables[i].summary.trim() == "Training Records") 
    { 
     var innerTables = tables[i].getElementsByTagName("TABLE"); 

     for (j = 0; j < innerTables.length; j++) 
     { 
      if (innerTables[j].className == "ms-formtable") 
      { 
       formTable = innerTables[j]; 
       break; 
      } 
     } 

     break; 
    } 
} 

// if we found the correct table, then find the right cells 

if (formTable) 
{ 
    for (i = 0; i < formTable.rows.length; i++) 
    { 
     var currentRow = formTable.rows[i]; 

     if (currentRow.cells[0].innerText == "Active Shooter" || currentRow.cells[0].innerText == "AT Level 1" || currentRow.cells[0].innerText == "CTIP" || currentRow.cells[0].innerText == "Cyber Awareness" || currentRow.cells[0].innerText == "HIPAA" || currentRow.cells[0].innerText == "No Fear" || currentRow.cells[0].innerText == "OPSEC" || currentRow.cells[0].innerText == "OPSEC for SmartPhone's & Tablets" || currentRow.cells[0].innerText == "Security Orientation/Refresher" || currentRow.cells[0].innerText == "SHARP" || currentRow.cells[0].innerText == "SHARP - F2F" || currentRow.cells[0].innerText == "Social Networking" || currentRow.cells[0].innerText == "TARP") 
     { 
      //selects the cell data that needs to be styled 
      var cellToStyle = currentRow.cells[1]; 
      var cellContents = cellToStyle.innerText; 

      //creates today's date for comparison to the date in the cell 
      var today = new Date(); 
      var todayParsed = Date.parse(today); 

      //creates a date out of the date as a string on the page 
      var dateToBeStyled = Date.parse(cellContents); 

      //finds the difference in milliseconds between the current date and the date in the cell 
      var difference = dateToBeStyled - todayParsed; 

      //decides whether to apply styling based on if the dates are within 30 days of each other 
      if (difference > 2592000000) { 
       cellToStyle.style.color = "#009900"; 

      } 

      if (difference < 2592000000 && difference > 259200000) { 
       cellToStyle.style.color = "#cda400"; 
       cellToStyle.style.fontWeight = "bold"; 
      } 

      if (difference < 259200000) { 
       cellToStyle.style.color = "#f00"; 
       cellToStyle.style.fontWeight = "bold"; 
      } 

     } 
    } 
} 
}</script> 

Vielen Dank für Ihre Hilfe.

Answer 1

Eine Möglichkeit besteht darin, die Methode FormatDates so festzulegen, dass sie ausgelöst wird, wenn der Benutzer den Titel eines Elements überfliegt.

var titles = document.querySelectorAll(".ms-vb-title"); 
for(var i = 0, len = titles.length; i < len; i++){ 
    var method = titles[i].attachEvent ? "attachEvent" : "addEventListener"; 
    titles[i][method]((titles[i].attachEvent ? "on" : "")+"mouseenter",FormatDates); 
} 

Der obige Code legt die FormatDates Methode zum mouseenter Ereignisse jeden Postens Titels (vorausgesetzt, der Titel mit der CSS-Klasse eingerichtet ms-vb-title).