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

ProgramBox

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

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

#javascript #html

Вопрос:

У меня есть HTML-таблица и кнопка, которая позволяет пользователю добавлять новый столбец. Прямо сейчас пользователь может добавить новый столбец при нажатии «добавить», однако я хотел бы, чтобы заголовок добавленного столбца можно было назвать Group1 и Group2 , Group3 .. для другой попытки нажатия.

В настоящее время он показывал только количество строк и столбцов:

Ожидаемый результат (когда пользователь нажимает add column 3 раза, заголовок должен стать Group1 и так далее):

 // append column to the HTML table
function appendColumn() {
  var tbl = document.getElementById('member_table'), // table reference
    i;
  // open loop for each row and append cell
  for (i = 0; i < tbl.rows.length; i  ) {
    createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col');
  }
}

// create DIV element and append to the table cell
function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
    txt = document.createTextNode(text); // create text node
  div.appendChild(txt); // append text node to the DIV
  div.setAttribute('class', style); // set DIV class attribute
  div.setAttribute('className', style); // set DIV class attribute for IE (?!)
  cell.appendChild(div); // append DIV to the table cell
}

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

 <table id="member_table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>


<button onclick="javascript:appendColumn()">Add column</button>

1. Вы не должны использовать «createCell», так как он устарел, Вместо этого используйте createElement и поместите «table», «tbody», «th», «td» для создания таблицы. Было бы лучше разделить это действие на отдельные функции, которые выполняют каждую из них, и вы можете вызывать их с любыми данными, которые хотите передать.

2. @КольоПеев, что такое устаревшее? Это имя пользовательской функции.

Ответ №1:

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

Кроме того, вам следует немного провести рефакторинг, чтобы первая ячейка в столбце была a th .

 let groupNum = 1;
const tableEl = document.getElementById('member_table');

// append column to the HTML table
function appendColumn() {

  // open loop for each row and append cell
  for (let i = 0; i < tableEl.rows.length; i  ) {
    createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), i, 'col');
  }

  tableEl.rows[0].querySelector('td:last-child').textContent = 'Group'   groupNum;
  groupNum  ;
}

// create DIV element and append to the table cell
function createCell(cell, text, style) {
  var div = document.createElement('div'), // create DIV element
    txt = document.createTextNode(text); // create text node
  div.appendChild(txt); // append text node to the DIV
  div.setAttribute('class', style); // set DIV class attribute
  div.setAttribute('className', style); // set DIV class attribute for IE (?!)
  cell.appendChild(div); // append DIV to the table cell
}

 table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  /* width: 100%; */
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

 <table id="member_table">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
</table>


<button onclick="javascript:appendColumn()">Add column</button>

1. Спасибо за ваш ответ , он отлично сработал. Но этот метод не работает, если пользователь может удалить столбец правильно? Например, пользователь добавляет группу group1 , а group2 затем удаляет group2 ее . В следующий раз, когда он снова нажмет «Добавить группу», group3 вместо group2

2. Правильно, но это другой вопрос. На этом этапе вам потребуется более надежная обработка состояния приложения.

Метки: Как добавить новый столбец с определенным именем заголовка и содержимым в Javascript