Question

Может, кто-нибудь подскажет, как внедрить stati c (sticky) заголовок для этой динамически создаваемой таблицы?

Я уже некоторое время пробовал несколько вещей из потоков Stackoverflow, но у меня нет знаний по HTML / CSS, и мне явно не хватает чего-то простого.

Мне удалось заставить его работать с помощью таблица, созданная непосредственно в основной части кода, но когда я использую свои динамически созданные таблицы из JSON, я не могу заставить что-либо «залипать».

Ниже кода:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=0.50, maximum-scale=1, user-scalable=0"/>
<head>

    <title>iNews HTML Running Order</title>
    <style>
        table 
        {
            border: solid 1px #CCCCCC;
            border-collapse: collapse;
            text-align: left;
            font:30px Arial;
        }
        tr, th, td
        {
            white-space: nowrap;
            padding-right: 50px;
        }
        tr
        {
            background-color: #ffffff;
            border: solid 1px #CCCCCC;
        }
        th
        {
            background-color: #CCCCCC;
        }
        #container
        {
            text-align: center;
            max-width: 100%;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<body onload="initialisePage('LW')">

    <p id="showData">Loading Running Order...</p>


</body>


<script>
    var loop;
    var filename;
    var table;

    function updateJSONData(filename)
    {
        getDataFromJSON(filename)
        loop = setInterval(function(){getDataFromJSON(filename);}, 500);
    }

    function initialisePage(newFilename)
    {
        filename = newFilename;
        updateJSONData(filename)
    }

    function setFileName(newFilename)
    {
        clearInterval(loop)
        filename = newFilename;
        updateJSONData(filename)
    }

    function getDataFromJSON(filename)
    {
        $.get( "http://10.142.32.72/dashboard/"+filename+".json", function( data ) {
            var myBooks = JSON.parse(data);
            CreateTableFromJSON(myBooks)
        });
    }

    function CreateTableFromJSON(myBooks)
    {
        var title = ["Page", "Slug", "Pres 1", "Pres 2", "CAM", "Format", "Clip Dur", "Total", "Backtime"];
        var col = ["page-number", "title", "pres1", "pres2", "camera", "format", "runs-time", "total-time", "back-time"];

        // CREATE DYNAMIC TABLE.
        table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = title[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < myBooks.length; i++) {

            tr = table.insertRow(-1);

            if (myBooks[i]["floated"] == "true"){
                tr.style.color = "#ffffff";
                tr.style.background = "blue";
            }

            if ((myBooks[i]["break"] == "true") && (myBooks[i]["floated"] == "false")){
                tr.style.background = "#00ff00";
            }

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = myBooks[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        console.log("Refreshed: " + filename);
    }
</script>

</html>

Заранее большое спасибо,

Джо

Dai · Answer 1 · 03 марта 2020

Удалите <body onload="initialisePage('LW')"> и используйте DOMContentLoaded вместо этого, поскольку это происходит намного раньше, чем событие документа load.
- load только срабатывает после того, как ВСЕ ресурсы / контент были загружены , включая «несущественный» (не DOM) контент, такой как изображения, и внешний контент, такой как рекламные баннеры, что означает, что событие load может быть запущено через десятки секунд после DOMContentLoaded, что делает событие load сегодня бесполезным).

Измените CSS на следующее:

table > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 10;
}

table > tbody > tr.floated {
    color: '#ffffff';
    background-color: 'blue';
}

table > tbody > tr.broken {
    background-color: '#00ff00';
}

JavaScript использует camelCase для функций, значений (переменных и параметров) и свойств, а не PascalCase.
Избегайте var и используйте const и let в сценариях, где это уместно. Обратите внимание, что const означает «неизменную ссылку» (вроде C ++); не означает «неизменяемое» или «постоянное значение времени компиляции». Я думаю, что это определение const было ошибкой дизайнеров языка JavaScript, но это, как, на мой взгляд, человек.
Используйте CSS классы через classList вместо установки индивидуального стиля свойства, использующие .style.
Текущая экосистема JavaScript также обычно использует 1TBS вместо стиля Allman .
Вместо === (точно-равно) вместо == (равно), потому что JavaScript принуждение типа может быть неожиданным).
Избегайте использования innerHTML везде, где это возможно. Используйте .textContent для настройки обычного текстового содержимого (и не используйте также .innerText). Неправильное использование innerHTML приводит к уязвимости XSS.
Это 2020 год. ОСТАНОВИТЬ ИСПОЛЬЗОВАТЬ JQUERY !!!!!!!!!!
НЕ ИСПОЛЬЗУЙТЕ В ВАШЕЙ КРЫШКЕ ВСЕ JAVASCRIPT КОММЕНТАРИИ, ПОТОМУ ЧТО ЭТО СМОТРИТ, КАК АВТОР НАДЕЕТСЯ НА ВАС НЕОБХОДИМОСТЬ, И ПОЛУЧАЕТ ОЧЕНЬ РАЗДРАЖАЮЩИЙ НА ДРУГИХ ЧИТАТЕЛЕЙ ARRRRGGHHHHH
Избегайте использования j в качестве итеративного имени переменной, поскольку оно слишком визуально похоже на i.

Измените JavaScript на это:

<script>
// You should put all of your own application-specific top-level page script variables in their own object so you can easily access them separately from the global `window` object.
const myPageState = {
    loop    : null,
    fileName: null,
    table   : null
};
window.myPageState = myPageState; // In the top-level function, `const` and `let`, unlike `var`, do not create a global property - so you need to explicitly set a property like so: `window.{propertyName} = ...`.

window.addEventListener( 'DOMContentLoaded', onDOMLoaded );

function onDOMLoaded( ev ) {

    window.myPageState.fileName = "LW";
    window.myPageState.loop = setInterval( refreshTable, 500 );
}

async function refreshTable() {

    if( typeof window.myPageState.fileName !== 'string' || window.myPageState.fileName.length === 0 ) return;

    const url = "http://10.142.32.72/dashboard/" + window.myPageState.fileName + ".json";

    const resp = await fetch( url );
    if( resp.status === 200 && resp.headers['ContentType'] === 'application/json' ) {
        const deserialized = await resp.json();
        ceateAndPopulateTableFromJSONResponse( deserialized );
    }
    else {
        // Error: unexpected response.
        // TODO: error handling
        // e.g. `console.error` or `throw new Error( "Unexpected response." )`, etc.
    }
}

function ceateAndPopulateTableFromJSONResponse( myBooks ) {

    // TODO: Verify the `myBooks` object layout (i.e. schema-verify `myBooks`).

    const columnTitles = ["Page", "Slug", "Pres 1", "Pres 2", "CAM", "Format", "Clip Dur", "Total", "Backtime"];
    const columnNames = ["page-number", "title", "pres1", "pres2", "camera", "format", "runs-time", "total-time", "back-time"];

    const table = window.myPageState.table || document.createElement( 'table' );
    if( window.myPageState.table !== table ) {
        window.myPageState = table;
        document.getElementById("showData").appendChild( table );
    }

    // Create the <thead>, if nnecessary:
    if( table.tHead === null )
    {
        table.tHead = document.createElement( 'thead' );

        const tHeadTR = table.tHead.insertRow(-1);
        for( let i = 0; i < columnNames.length; i++ ) {
            const th = document.createElement('th');
            th.textContent = columnTitles[i];
            tHeadTR.appendChild( th );
        }
    }

    // Clear any existing tbody:
    while( table.tBodies.length > 0 ) {
        table.removeChild( table.tBodies[0] );
    }

    // Populate a new <tbody>:
    {
        const tbody = document.createElement('tbody');

        for( let i = 0; i < myBooks.length; i++ ) {

            const tr = table.insertRow(-1);
            tr.classList.toggle( 'floated', myBooks[i]["floated"] === "true" );
            tr.classList.toggle( 'broken' , myBooks[i]["break"  ] === "true" && myBooks[i]["floated"] === "false" );

            for( let c = 0; c < columnNames.length; c++ ) {
                const td = tr.insertCell(-1);
                const colName = columnNames[c];
                td.textContent = myBooks[i][ colName ];
            }
        }

        table.appendChild( tbody );
    }

    console.log( "Refreshed: " + window.myPageState.fileName );
}
</script>

Статический / липкий заголовок с помощью таблицы Dynami c

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Статический / липкий заголовок с помощью таблицы Dynami c

Пожалуйста, войдите или зарегистрируйтесь чтобы ответить на этот вопрос.

1 Ответ

Пожалуйста, войдите или зарегистрируйтесь что бы добавить комментарий.

Похожие темы