javascript - 如何为 SharePoint 2010 网站上的预览 Pane 编写 JavaScript/jQuery？

Question

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

JavaScript 选择日期并根据日期与今天日期的关系决定日期是否需要为绿色、黄色或红色。加载时，JavaScript 在预览 Pane 中出现的第一个条目上可以正常工作，但在选择其他条目时，颜色不会根据需要更改。我需要在 JavaScript 中添加/更改什么才能将 JavaScript 条件单独应用于列表中的每个条目？

页面上的列表如下所示:

The list on the page

以下是放置在内容编辑器 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>

非常感谢您的帮助。

Answer 1

一种方法可能是将您的 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);
}

上面的代码将 FormatDates 方法附加到每个项目标题的 mouseenter 事件(假设标题用 CSS 类 ms-vb-title 修饰) )。