1

リストに表示される日付の色に影響を与える JavaScript コードをコンテンツ エディター Web パーツに追加しました。リストはプレビュー ペインのデザインで設定されており、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>

どうもありがとうございました。

4

1 に答える 1

0

アプローチの 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)。

于 2016-04-28T21:46:27.053 に答える