Javascript для чтения CSV и создания двух HTML-таблиц

#javascript #html

Вопрос:

В приведенном ниже коде я пытаюсь создать две динамические таблицы HTML, но это не работает. Одна таблица с идентификатором «Таблица» и другая с идентификатором «Таблица».

 <script type="text/javascript">
function Upload() {
const columns = [0, 3] // represents allowed column 1 and 3 in index form
const dccolumns = [0, 3] // represents allowed column 1 and 3 in index form

var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9s_\.-:]) (.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
    if (typeof (FileReader) != "undefined") {
        var reader = new FileReader();
        reader.onload = function (e) {
            
            var table = document.createElement("table");
            table.id = 'table'
           
            var tabledc = document.createElement("tabled");
            tabled.id = 'tabled'
           
            var rows = e.target.result.split("n");
            for (var i = 0; i < rows.length; i  ) { var cells = rows[i].split(","); if (cells.length > 1) {
                    var row = table.insertRow(-1);                        
                    for (var j = 0; j < cells.length; j  ) {
                        // ignore columns that are not allowed
                        if (!columns.includes(j)) {
                          continue
                        }

                        var rc = cells[j];
                        if (rc == "SUMMARY") {
                           var cell = row.insertCell(-1);
                           cell.innerHTML = cells[j];                            
                           alert(rc);
                        }
                    }
                }
            }
            
            var dvCSV = document.getElementById("dvCSV");
            dvCSV.innerHTML = "";
            dvCSV.appendChild(table);

            var alld = document.getElementById("alld");
            alld.innerHTML = "";
            alld.appendChild(tabled);
    }
        reader.readAsText(fileUpload.files[0]);
    } else {
        alert("This browser does not support HTML5.");
    }
} else {
    alert("Please upload a valid CSV file.");
}
 

}

Когда я запускаю приведенный выше код, он просто обновляет таблицу в «Таблице», но не в «Таблице». Я не уверен, что делаю здесь что-то не так.

Спасибо

Комментарии:

1. можете ли вы добавить HTM-код сюда ? трудно понять, что есть в HTML

2. document.createElement("tabled") создает <tabled></tabled>

3. У вас опечатка в определении переменной tabledc . Вы пишете var tabledc , но продолжаете использовать tabled . Я думаю, что это просто ошибка копирования и вставки. Пожалуйста, также предоставьте содержимое csv — файла.

4. Как упоминал Тревор Кропп, вы создаете <tabled></tabled> элемент, который не является таблицей. Но , кроме того, вы, похоже, никогда не добавляете никакого контента tabled , только в table . Это может стать более понятным, если вы будете использовать devtools для отладки кода и пошагового просмотра каждой строки, отслеживая ее эффекты.

5. Спасибо всем вам. Это решило проблему. Как мне принять ответ Тревора?