如何在SharePoint 2010网站上为预览窗格编写JavaScript/jQuery？

我在内容编辑器web部件中添加了一些JavaScript代码，以影响列表中显示的日期的颜色。该列表是使用预览窗格设计设置的，有多个条目需要应用javascript代码

javascript选择日期，并根据日期与今天日期的关系决定日期是绿色、黄色还是红色。加载时，javascript在预览窗格中显示的第一个条目上正常工作，但在选择其他条目时，颜色不会根据需要更改。我需要在JavaScript中添加/更改什么才能将JavaScript条件分别应用于列表中的每个条目

以下是页面上的列表：

以下是放置在内容编辑器web部件中的JavaScript：

<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>

$（文件）。准备好了吗(
函数（）
{
$（“div.ms-ppleft table tr td.ms vb title”）.trigger（“onfocus”）；
}
)
//由Philip Speroni于2016年4月22日添加，用于对当前日期后30天内的日期应用颜色样式
_spBodyOnLoadFunctionNames.push（“FormatDates”）；
函数FormatDates（）
{
var contentTable=document.getElementById（“MSO_contentTable”）；
var tables=contentTable.getElementsByTagName（“表”）；
var格式表；
//找到我们需要使用的表
对于（i=0；i2592000000）{
cellToStyle.style.color=“#009900”；
}
如果（差值<2592000000&&差值>259200000）{
cellToStyle.style.color=“#cda400”；
cellToStyle.style.fontwweight=“bold”；
}
如果（差值<259200000）{
cellToStyle.style.color=“#f00”；
cellToStyle.style.fontwweight=“bold”；
}
}
}
}
}

---

非常感谢您的帮助。

一种方法可能是将

FormatDates

方法设置为在用户悬停在项目标题上时触发

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);
}

var titles=document.querySelectorAll（“.msvbtitle”）；
对于（变量i=0，len=titles.length；i

---

上面的代码将

FormatDates

方法附加到每个项目标题的

mouseenter

事件（假设标题用CSS类

ms vb title

装饰）。

一种方法可能是将

FormatDates

方法设置为在用户悬停在项目标题上时触发

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);
}

var titles=document.querySelectorAll（“.msvbtitle”）；
对于（变量i=0，len=titles.length；i

---

上面的代码将

FormatDates

方法附加到每个项目标题的

mouseenter

事件（假设标题用CSS类

ms vb title

装饰）。

@PhilipSperoni欢迎您！别忘了把这个标记为答案，这样人们就知道问题已经解决了。@PhilipSperoni不客气！别忘了将此标记为答案，这样人们就知道问题已经解决了。