Javascript добавляет заголовки строк в таблицу из массива?

#javascript #datatables #header #row

#javascript #таблицы данных #заголовок #строка

Вопрос:

У меня есть 2d-массив, который заполняет таблицу. Есть ли способ вставить столбец полностью влево?

 //function to create the table
function createTable(tableData) {
  var table = document.createElement('table');
  var row = {};
  var cell = {};

  tableData.forEach(function (rowData) {
    row = table.insertRow(-1);
    rowData.forEach(function (cellData) {
      cell = row.insertCell();
      cell.textContent = cellData;
      let cellVal = cellData;
      //make cells different shades of green and red for pos/neg (based on %)
      if (cellVal > 0) {
        cell.style.backgroundColor = '#00e100';
      } else if (cellVal < 0) {
        cell.style.backgroundColor = 'red';
      }
    });
  });
  document.body.appendChild(table);
}
createTable(transpose_array);
  

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

Изображение ниже: введите описание изображения здесь

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

1. Откуда берутся заголовки столбцов?

2. Просто добавьте строку в таблицу перед циклом, который добавляет содержимое tableData .

3. Я добавил строку в матрицу вверху следующим образом: transpose_array.unshift(dates_arr)

Ответ №1:

forEach() Обратный вызов получает второй аргумент, содержащий индекс массива, вы можете использовать его для индексации в массив заголовков и вставить его в качестве первой ячейки в каждой строке.

 //function to create the table
function createTable(tableData, row_headings) {
  var table = document.createElement('table');
  var row = {};
  var cell = {};
  
  tableData.forEach(function(rowData, i) {
    row = table.insertRow(-1);
    cell = row.insertCell();
    cell.textContent = row_headings[i];
    rowData.forEach(function(cellData) {
      cell = row.insertCell();
      cell.textContent = cellData;
      let cellVal = cellData;
      //make cells different shades of green and red for pos/neg (based on %)
      if (cellVal > 0) {
        cell.style.backgroundColor = '#00e100';
      } else if (cellVal < 0) {
        cell.style.backgroundColor = 'red';
      }
    });
  });
  document.body.appendChild(table);
}
createTable(transpose_array, price_array);
  

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

1. Это просто добавило еще одну строку поверх всех дат

2. Я думал, это то, что вы хотели.

3. Первая строка не получает зеленый или красный цвета фона.

4. О нет, извините. Я хочу добавить столбец слева от первых чисел

5. Что он должен содержать, индекс массива?