Управление таблицами JavaScript

У меня есть таблица с одним столбцом и примерно десятью строками. В первом столбце есть строки с текстом в виде заголовков строк, «заголовок 1», «заголовок 2». Второй столбец содержит поля для ввода данных пользователем (текстовые поля и флажки).

Я хочу, чтобы вверху была кнопка с надписью «Добавить новое...» и чтобы она создавала третий столбец с теми же полями, что и первый столбец. Если пользователь щелкнет его еще раз, он создаст еще один пустой столбец с полями (как во втором столбце).

Кто-нибудь знает эффективный способ манипулирования DOM для достижения этой цели?

Я экспериментирую с div и TABLES, но уже третий день этим занимаюсь, и это кажется сложнее, чем должно быть.

Советы по улучшению вашего сообщения: удалите Ajax из заголовка, он не играет роли в вашей проблеме (когда вы ее раскрываете). И вы пишете: «с одним столбцом», затем «Второй столбец» ...

PhiLho 04.10.2008 00:24

@PhiLho: хех, я уже отредактировал ajax из тегов и полностью пропустил его в заголовке. Исправлено.

Shog9 04.10.2008 02:43
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
5
2
6 554
2

Ответы 2

Что-то вроде

function(table)
{
  for(var i=0;i<table.rows.length;i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(true);
    table.rows[i].appendChild(newcell);
  }
}

Забавное упражнение. Благодаря подсказке AviewAnew я смог это сделать.

function AddColumn(tableId)
{
  var table = document.getElementById(tableId);
  if (table == undefined) return;
  var rowNb = table.rows.length;
  // Take care of header
  var bAddNames = (table.tHead.rows[0].cells.length % 2 == 1);
  var newcell = table.rows[0].cells[bAddNames ? 1 : 0].cloneNode(true);
  table.rows[0].appendChild(newcell);
  // Add the remainder of the column
  for(var i = 1; i < rowNb; i++)
  {
    newcell = table.rows[i].cells[0].cloneNode(bAddNames);
    table.rows[i].appendChild(newcell);
  }
}

со следующим HTML:

<input type = "button" id = "BSO" value = "Add" onclick = "javascript:AddColumn('TSO')"/>
<table border = "1" id = "TSO">
<thead>
<tr><th>Fields</th><th>Data</th></tr>
</thead>
<tbody>
<tr><td>Doh</td><td>10</td></tr>
<tr><td>Toh</td><td>20</td></tr>
<tr><td>Foo</td><td>30</td></tr>
<tr><td>Bar</td><td>42</td></tr>
<tr><td>Ga</td><td>50</td></tr>
<tr><td>Bu</td><td>666</td></tr>
<tr><td>Zo</td><td>70</td></tr>
<tr><td>Meu</td><td>80</td></tr>
</tbody>
</table>

Другие вопросы по теме