Как добавить данные к определенному тегу h2?
У меня есть сценарий ajax, который загружает данные из файла csv. Однако мне трудно добавить его к определенному тегу h2.
Вот что у меня есть на данный момент:
<script>
$.ajax({
url: 'csv_data.csv',
dataType: 'text',
}).done(successFunction);
function successFunction(data) {
var allRows = data.split(/\r?\n|\r/);
var table = '<table>';
for (var singleRow = 0; singleRow < allRows.length; singleRow++) {
if (singleRow === 0) {
table += '<thead>';
table += '<tr>';
} else {
table += '<tr>';
}
var rowCells = allRows[singleRow].split(',');
for (var rowCell = 0; rowCell < rowCells.length; rowCell++) {
if (singleRow === 0) {
table += '<th>';
table += rowCells[rowCell];
table += '</th>';
} else {
table += '<td>';
table += rowCells[rowCell];
table += '</td>';
}
}
if (singleRow === 0) {
table += '</tr>';
table += '</thead>';
table += '<tbody>';
} else {
table += '</tr>';
}
}
table += '</tbody>';
table += '</table>';
$('body').append(table);
}
</script>
Вот мой CSV-файл:
Name,City,Country
William,Yamrat,Nigeria
и я пытаюсь добавить его только к определенному тегу h2:
$('<h2>Test</h2>').prepend(table)
Не уверен, почему он не работает. Любая идея, почему он не добавляется к данному тегу h2?
вот с чем у меня проблема. Я пытаюсь добавить этот сценарий в <h2> Test </h2>. Я не знал, как к этому подойти. Я знаю, что могу добавить его к определенному классу, но хочу знать, можно ли добавить его в тег h2.
Вы имеете в виду <h2>Test</h2><table>...</table>?
Prepend означает <h2><table>...</table>Test</h2>
правильно: <h2> Тест </h2> <script> ... </script>
либо до <h2> Test </h2>, либо после <h2> Test </h2>
$('<h2>Test</h2>').prepend(table) должен находиться внутри события, такого как onload, onchange и т. д. Он не запускается сам по себе. И семантически неправильно иметь таблицу внутри элемента заголовка, но jQuery все равно.
Ваша операция идет в обратном направлении. $('<h2>Test</h2>').prepend(table) говорит: Создайте новый элемент h2, а затем добавьте к нему таблицу. Но этот h2 не прикреплен к странице. Итак, вы добавляете к нему таблицу, но h2 никогда не добавляется к странице, поэтому изменение теряется.
Ответы 4
.prepend() и .append() предназначены для помещения элемента внутри в другой элемент (до или после существующего содержимого), но таблица не может находиться внутри элемента заголовка. Вы должны добавить каждый из них индивидуально к телу:
$('body').append('<h2>Test</h2>', table);
$ ('h2: содержит (Тест)'). перед (таблица); кажется, работает для меня.
<h2> уже находится в DOM? Я думал, это то, что вы хотели добавить. Вы написали $("<h2>Test</h2>"), предназначенный для создания нового элемента, а не для выбора чего-либо.
ваш код не работает, потому что вы используете неправильный селектор jQuery для выбора вашего h2. h2 должен существовать, либо закодировав его в свой HTML, либо добавив его с помощью JavaScript, затем вы можете настроить таргетинг на него с помощью jQuery с чем-то вроде:
<h2 id = "foo">test</h2>
// JS
const table = '<table></table>';
$('#foo').prepend(table);
перо рабочее https://codepen.io/JustH/pen/gZeWNR
Отдельная проблема заключается в том, что таблица внутри H2 недействительна, и ваш браузер будет выдавать предупреждения.
см. Почему у меня не может быть <table> внутри <h2>?
если вы пытаетесь просто вставить таблицу до или после h2, используйте .before или .after
$('#foo').before(table);
// will result in:
<table></table>
<h2 id = "foo">Test</h2>
Мне удалось заставить его работать, используя: $ ('h2: contains (Test)'). Before (table);
Рассмотрите возможность использования объектов jQuery для улучшения вашего кода. Пример:
var myData = "Name,City,Country\r\nWilliam,Yamrat,Nigeria";
/*
$.ajax({
url: 'csv_data.csv',
dataType: 'text',
}).done(successFunction);
*/
$(function() {
function successFunction(data) {
var allRows = data.split(/\r?\n|\r/);
var tbl = $("<table>");
tbl.append($("<thead>"), $("<tbody>"));
$.each(allRows, function(i, row) {
var cells = row.split(",");
console.info(row, cells);
if (i == 0) {
$("<tr>").appendTo($("thead", tbl));
$.each(cells, function(k, v) {
$("thead > tr", tbl).append($("<th>").html(v));
});
} else {
var r = $("<tr>").appendTo($("tbody", tbl));
$.each(cells, function(k, v) {
r.append($("<td>").html(v));
});
}
});
console.info(tbl.prop("outerHTML"));
$("h2:first").before(tbl);
}
successFunction(myData);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Test</h2>Предложите использовать .before() для добавления элемента перед селектором. Если это конкретный элемент h2, было бы лучше назначить элементу уникальный идентификатор или определенный класс:
<h2 class = "banner">Test</h2>
затем используйте это, чтобы помочь добавить: $(".banner"), иначе вы добавите ко всем элементам h2. Селектор - это ключ.
В зависимости от того, сколько таблиц вы сделаете, вы можете подумать о переносе этого в функцию:
function makeTable(r, h){
var tbl = $("<table>");
if (h == undefined){
h = false;
}
if (h){
tbl.append($("<thead>"));
}
tbl.append($("<tbody>"));
$.each(r, function(i, row) {
var cells = r.split(",");
if (i == 0 && h) {
$("<tr>").appendTo($("thead", tbl));
$.each(cells, function(k, v) {
$("thead > tr", tbl).append($("<th>").html(v));
});
} else {
var tr = $("<tr>").appendTo($("tbody", tbl));
$.each(cells, function(k, v) {
tr.append($("<td>").html(v));
});
}
});
return tbl;
}
Затем используйте так:
var myTable = makeTable(allRows, true);
$("h2").before(myTable);
Надеюсь, это поможет.
Здесь две главные вещи. Во-первых, элемент H2 не существует во время «добавления». Во-вторых, будет разумнее заменить все это, добавив одновременно H2 и таблицу. Другой вариант, если у вас уже есть элемент H2, используйте jQuery .after, намного проще .. http://api.jquery.com/after/
Я не думаю, что у вас может быть таблица внутри элемента
h2.