Блог

Главная - Вопросы по программированию - При попытке отобразить содержимое массива в таблице порядок меняется на обратный

При попытке отобразить содержимое массива в таблице порядок меняется на обратный

#javascript #html

#javascript #HTML

Вопрос:

Я полный новичок в программировании и особенно в JavaScript. Мое назначение подсказывает мне использовать array.map() для отображения содержимого в таблице HTML с добавленным индексом.

 var txt = "";
var products = ["one", "two", "three", "four", "five"];
var products2 = products.map(withIndex);

document.getElementById("demo").innerHTML = txt;

function withIndex(value, index, array) {
    txt = ("<tr><td>")   (index 1)   " "   value   txt   ("</tr></td>");
} 
 <table id="demo"></table>

Это работает почти так, как хотелось, но содержимое таблицы отображается в обратном порядке, например:
5 пять
4 четыре
3 три
2 два
1 один

Я также не до конца понимаю причину, по которой var txt = «»; необходим при использовании массивов.

Спасибо за вашу помощь.

Ответ №1:

Сначала ваш код генерирует нечто, похожее на это

 <tr><td><tr><td><tr><td></tr></td></tr></td></tr></td>

Вы помещаете предыдущий код после нового, но вы также помещаете его внутри нового td.

Вы используете map совершенно неправильно.

 var txt = "";
var products = ["one", "two", "three", "four", "five"];
var products2 = products.map(withIndex);

document.getElementById("demo").innerHTML = products2.join("");

function withIndex(value, index, array) {
    return "<tr><td>"   (index 1)   " "   value   "</td></tr>";
} 
 <table id="demo"></table>

чтобы сделать это так, как вы делали, вам нужно использовать forEach

 var txt = "";
function withIndex(value, index, array) {
  txt = txt   "<tr><td>"   (index 1)   " "   value   "</tr></td>";
}

var products = ["one", "two", "three", "four", "five"];
var products2 = products.forEach(withIndex);

document.getElementById("demo").innerHTML = txt; 
 <table id="demo"></table>

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

1. Вместо «совершенно неправильно», возможно, немного уточните. Не совсем понятно, что вы изменили.

2. Спасибо за все комментарии. Честно говоря, мне потребуется некоторое время, чтобы переварить это. Я знаю, что это должно быть элементарно, но для меня все еще странно, что вы можете ответить так быстро. По сути, мы были предоставлены самим себе для изучения w3schools, и это первый раз, когда я даже слышал о array.join() .