Размеры таблицы в CSS не работают в HTML - PullRequest
Новая
       12

Размеры таблицы в CSS не работают в HTML

0 голосов
/ 13 апреля 2020

Я не могу получить мои данные, как ожидалось, в формате таблицы. 

myList = '[{"date":"2020-04-05 18:26:01", "symptom":{"chest_pain":{"type":"Mild"},"cough":{"frequency":"5 to 15 times an hour","type":"With Flum"}}},{"date":"2020-04-06 14:57:11", "symptom":{"fever":{"temperature":"98"},"digestion_problem":"Yes"}},{"date":"2020-04-13 04:04:25", "symptom":{"cough":{"frequency":"Less than 5 times an hour","type":"Dry"},"breathing":{"severity":"6"}}}]';

function buildHtmlTable(selector) {
    var columns = addAllColumnHeaders(myList, selector);

    for (var i = 0; i < myList.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {

            var cellValue = getCellValue(myList[i], columns[colIndex]);
            if (cellValue == null)
                cellValue = "";
            row$.append($('<td/>').html(cellValue));
        }
        $(selector).append(row$);


    }
    $('th').each(function() {
        var text = $(this).text();
        $(this).text(text.replace(/symptom/g, "")); 
        text = $(this).text();
        $(this).text(text.replace(/-/g, " ")); 
        text = $(this).text();
        $(this).text(text.replace(/_/g, " ")); 
        text = $(this).text();
        $(this).text(capitalizeFirstLetter(text)); 
    });
}

function capitalizeFirstLetter(str) {
    return str.replace(/\w\S*/g, function(txt){
        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
    });
  }

  console.log(capitalizeFirstLetter('foo')); // Foo


function addAllColumnHeaders(myList, selector) {
    var columnSet = [];
    var headerTr$ = $('<tr/>');

    for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];

        recursiveHeaderCheck(rowHash, selector, "", columnSet, headerTr$);
    }
    $(selector).prepend("<thead>");
    $(selector).append(headerTr$);
    $(selector).append("</thead>");

    return columnSet;
}
#symptom_table{
  width: 85vw !important;
  height: 50vh !important;
}

#excelDataTable  {
  width: 85vw !important;
  height: 50vh !important; 
} 
<div id="symptom_table"> 
     <table class="fl-table" id="excelDataTable" border="none"> </table>
  </div>

Я пытаюсь отобразить таблицу, которую я извлек из базы данных в HTML.

, однако, когда я загружаю свою страницу и проверить, я не вижу таблицы. Я вижу несоответствие в моих размерах. Таблица данных также содержит данные.

Не уверен, что мне не хватает

Редактировать 1: После изменения - на _,. к # и что к VH. sympom_table enter image description here Превосходно enter image description here

Редактировать 2: я вижу данные из моего js в моей консоли: enter image description here

1 Ответ

1 голос
/ 13 апреля 2020

Ваш CSS не соответствует идентификатору вашей таблицы: .symptom-table класс не применяется к div с идентификатором symptom_table (примечание - и _). Я думаю, что вам нужно изменить .symptom-table селектор на #symptom_table, то есть выбор таблицы по идентификатору с правильным написанием.

Кроме того, исправьте единицу с wh на vh

...