У меня есть таблица HTML и кнопка, позволяющая пользователю добавлять новый столбец. Прямо сейчас пользователь может добавить новый столбец, нажав «добавить». Например, новый столбец Group1 добавляется после того, как пользователь нажимает add column. Я не совсем уверен, как использовать createElement для достижения своей цели. У кого-нибудь есть идеи по этому поводу? Благодарю .

enter image description here

Вопрос : Как мне вставить раскрывающийся список для каждой новой добавленной ячейки столбца вместо 1, 2 ..? Помимо этого, он должен позволять пользователю выбирать и отменять выбор своей опции.

Ожидаемый результат :

enter image description here

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;
}
<h2>HTML Table</h2>

<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
terry5546 8 Окт 2021 в 16:02

3 ответа

Лучший ответ

Создать функцию createSelectEl, которая примет values в качестве параметра и вернет элемент select с параметрами. При вызове createCell вместо передачи значения i передайте этот вновь сгенерированный элемент select.

В createCell вместо создания textNode просто добавьте переданный элемент select.

function createSelectEl(values){
    var select = document.createElement("select");
    select.name = "group1";
    select.id = "groupId"
    // 1st option
    var option = document.createElement("option");
    option.text = 'Select One';
    select.appendChild(option);
    for (const val of values)
    {
        var option = document.createElement("option");
        option.value = val;
        option.text = val;
        select.appendChild(option);
    }
    return select;
}

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++) {
    const values = ["3540531", "3518796", "4512365", "1234896"];
    createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), createSelectEl(values), 'col');
    // 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.appendChild(text);
  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;
}
<h2>HTML Table</h2>

<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
navnath 8 Окт 2021 в 13:21

Это минимальная версия того, что вам нужно. Вы можете обновить / заменить функцию создания ячейки следующим шаблоном (с вашим требованием).

function createDropdown(cell) {
    var select = document.createElement('select');
  for (var i = 0; i < 10; i++) {
    var option = document.createElement('option');
        option.value =  i;
    option.text = "Option " + i;
    select.appendChild(option);
  }
    cell.appendChild(select);
}

Вы можете прочитать о любых функциях JavaScript (например, createElement) в документации Mozilla Firefox. Google: keyword mdn например, createElement mdn

1
Jayendra Sharan 8 Окт 2021 в 13:19

Сгенерировать HTML-код выбора вместо использования функции createElement, Уникального выбора name, id для каждого элемента выбора и имени Group, добавленного в th вместо td в 1-м ряду.

function createSelectHTML(values, groupText){
  let html = `<select name ='${groupText}' id='${groupText}'>`;
  const firstOptopn = `<option>Select One</option>`;
  html+=firstOptopn;
  html+=values.map(val => `<option value="${val}">${val}</option>`).join('');
  return html+="</select>";
}

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

// append column to the HTML table
function appendColumn() {
  const th = document.createElement('th');
  const groupText = 'Group' + groupNum;
  th.textContent = groupText;
  tableEl.rows[0].appendChild(th);
  // open loop for each row and append cell
  for (let i = 1; i < tableEl.rows.length; i++) {
    const values = ["3540531", "3518796", "4512365", "1234896"];
    createCell(tableEl.rows[i].insertCell(tableEl.rows[i].cells.length), createSelectHTML(values, groupText+i), 'col');
  }
  groupNum++;
}

// create DIV element and append to the table cell
function createCell(cell, selectHTML, style) {
  var div = document.createElement('div'); // create DIV element
  div.innerHTML = selectHTML;
  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;
}
<h2>HTML Table</h2>

<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>
0
navnath 8 Окт 2021 в 13:52