Нужна помощь с JavaScript и созданием html-таблицы из массива

ProgramBox

Нужна помощь с JavaScript и созданием html-таблицы из массива

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Я перепробовал все, что смог найти через Google, и ничего не сработало правильно. Вывод — это всего лишь одна строка со всем перечисленным содержимым массива. Что мне нужно, так это способ записать содержимое массива, но после 3 ячеек автоматически начинать новую строку. Я опубликую код, который я сделал ниже, а также вопрос. (да, это из задания. : ( )

 //***(8) place the words in the string "tx_val" in a table with a one pixel border,
//***    with a gray backgound. Use only three cells per row. Empty cells should contain
//***    the word "null". Show the table in the span block with id="ans8"

var count = i % 3;
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i  )
{
    out  = ("<td>"   txArr[i]   "</td>");
    count  ;
    if (count % 3 == 0)
    {
        nrow  = "</tr><tr>";
    }
}

document.getElementById('ans8').innerHTML = out   nrow;

1. Нет проблем с размещением назначений здесь, если вы укажете, что это так. Однако, вы могли бы рассказать нам, с чем именно у вас возникли трудности…

2. Можете ли вы опубликовать пример вывода для массива?

3. Вам не нужен nrow var, просто измените эту строку на out = "</tr><tr>" , и вы на полпути к цели.

4. Ваш код не работает? Пожалуйста, предоставьте любые сообщения об ошибках.

Ответ №1:

вам нужно напечатать tr ‘ы внутри таблицы (и добавить </table> !):

 var count = i % 3; // btw. what's this??
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i  )
{
    out  = "<td>"   txArr[i]   "</td>";
    count  ;
    if (count % 3 == 0)
        out  = "</tr><tr>";
}
out  = "</table>";

document.getElementById('ans8').innerHTML = out;

Ответ №2:

Вместо того, чтобы пытаться записывать html, попробуйте манипулировать dom. Мне это кажется намного более простым. Взгляните на следующее:

var row = table.insertRow();
msdn
mdc
var cell = row.insertCell();
msdn
mdc
var cellContent = document.createTextNode(txArr[i]);
msdn
mdc
cell.appendChild(cellContent);
msdn
mdc

Чтобы решить, когда начинать новую строку, просто используйте оператор modulus ( %
msdn
mdc ) против i :

 if (i % 3 == 0)
{
    row = table.insertRow()
}

В итоге вы получите что-то вроде этого:

 var container = document.getElementById("ans8");
var t = container.appendChild(document.createElement("table"));
var row;
txArr.forEach(function (item, i)
{
    if (i % 3 == 0)
    {
        row = t.insertRow()
    }
    row.insertCell().appendChild(document.createTextNode(item));
});

Я оставлю немного для вас, чтобы вы разобрались — границы, цвет фона, вставив туда слово «null». В конце концов, это ваше домашнее задание. 🙂

Кроме того, для старых браузеров вам нужно самостоятельно добавить Array.forEach.

Ответ №3:

Я предпочитаю использовать массив вместо объединения

 var html = [];
html.push("<table><tr>");
var i = 0;

for (var k in txArr)
{
    if(i>=3){
      i=0;
      html.push("</tr><tr>");
    }
    html.push("<td>"   txArr[k]   "</td>");
    i  ;
}
html.push("</tr></table>");

document.getElementById('ans8').innerHTML = html.join('');

// wrapped in function
function arrayToTable(a,cols){
 var html = [];
    html.push("<table><tr>");
    var i = 0;

    for (var k in a)
    {
        if(i>=cols){
          i=0;
          html.push("</tr><tr>");
        }
        html.push("<td>"   a[k]   "</td>");
        i  ;
    }
    html.push("</tr></table>");
    return html.join('')
}
document.getElementById('ans8').innerHTML = arrayToTable(txArr, 3);

Ответ №4:

Это может быть немного проще выполнить с помощью чего-то вроде

 buffer = "<table>";
for(var r = 0; r < 10; r  ){
   buffer  = "<tr>";
   for(var c = 0; c < 3 ; c  ){
      buffer  = "<td>Cell: "   r   ":"   c   "</td>";
   }
   buffer  = "</tr>";
}
buffer  = "</table>";
 document.getElementById("ans8").innerHTML = buffer;

Это создало бы таблицу длиной 30 строк по 3 столбца для каждой строки.

Ответ №5:

возможно, вы слишком рано присваиваете значения «count», поскольку еще не знаете, что такое i. и вы нигде не указываете значение nrow … измените его на out.

 var count;
var nrow = "";
var out = "<table border='1' bgcolor='gray'><tr>"
for (var i=0; i<txArr.length; i  )

{
out  = ("<td>"   txArr[i]   "</td>");
count  ;
if (count % 3 == 0)
    {
    out  = "</tr><tr>";
    }
}

 document.getElementById('ans8').innerHTML = out   nrow;

Ответ №6:

В принципе, я бы разделил ее на 3 функции, для удобства чтения и обслуживания. Эти функции будут состоять из создания ячейки, строки и таблицы. Это определенно упрощает чтение кода. Поскольку я не тестировал это, ниже приведен пример того, что я бы сделал.

 function createTableCell(value) {
  return value == null? "<td>NULL</td>":"<td>"   value   "</td>";
}

function createTableRow(array) {
  var returnValue = "";
  for (var i = 0; i < array.length; i  ) {
    returnValue = returnValue   createTableCell(array[i]);
  }
  return "<tr>"   returnValue   "</tr>";
}

function arrayToTable(array, newRowAfterNArrayElements) {
  var returnValue = "<table>";
  for (var i = 0; i < array.length; i = i   newRowAfterNArrayElements) {
     returnValue = returnValue   createTableRow(array.split(i, (i   newRowAfterNArrayElements) - 1));
  }
  return returnValue   "</table>";
}

document.getElementById("ans8").innerHTML = arrayToTable(txArr, 3);

Кроме того, это делает ваш код намного более динамичным и многоразовым. Предположим, у вас есть массив, который вы хотите разделить на каждые 4 элемента. Вместо жесткого кодирования вы можете просто передать другой аргумент.

Ответ №7:

Вот живой пример выполнения этого с помощью DOMBuilder и использования того же кода для генерации DOM-элементов и HTML-строки.

http://jsfiddle.net/insin/hntxW/

Код:

 var dom = DOMBuilder.elementFunctions;

function arrayToTable(a, cols) {   
  var rows = [];
  for (var i = 0, l = a.length; i < l; i  = cols) {
      rows.push(a.slice(i, i   cols));
  }
  return dom.TABLE({border: 1, bgcolor: 'gray'},
    dom.TBODY(
      dom.TR.map(rows, function(cells) {
        return dom.TD.map(cells);
      })
    )
  );
}

var data = [1, 2, null, 3, null, 4, null, 5, 6];

document.body.appendChild(arrayToTable(data, 3));
document.body.appendChild(
  dom.TEXTAREA({cols: 60, rows: 6},
    DOMBuilder.withMode("HTML", function() {
      return "" arrayToTable(data, 3);
    })
  )
);

Ответ №8:

Да, вы можете создать с нуля…но есть более быстрый способ. Добавьте к ней сетку. Сетка примет данные в виде строки, массива, выходных данных json и т.д. И превратит их в правильную HTML-таблицу, выводимую на основе HTML, и позволит вам расширить ее с помощью сортировки, подкачки, фильтрации и т.д.

Мой личный фаворит — это DataTables, но есть множество других.

Как только вы освоитесь, настройка одного из них займет буквально 5 минут. Сэкономьте свои мозговые силы, чтобы излечить мировой голод, создать следующий facebook и т.д….