Member 14917922 Ответов: 1

Как использовать проверенные значения в таблице для создания другой таблицы с помощью javascript

Цитата:
У меня есть создание html-таблицы с функцией javascript на странице. и мне нужно создать флажок в каждом последнем столбце В каждой строке из моей таблицы 1, и если флажок установлен, то элементы таблицы 1 должны быть добавлены в таблицу 2 без флажка. Я не знаю, как это сделать. кто-нибудь может мне помочь? пожалуйста, приведите мне пример для этого.


Что я уже пробовал:

  const a = ["a1", "a2", "a3"];
const b = ["b1", "b2", "b3"];
const c = ["c1", "c2", "c3"];
let html = [];
window.addEventListener("load", function() {
  html.push("<table><tbody>");
  for (var i = 0; i < a.length; i++) {
    j = i + 1;
    html.push(`<tr><td>${j}</td><td>${a[i]}</td><td>${b[i]}</td><td>${c[i]}</td>`);
    html.push(`<td><input type="checkbox"  value="${i}" name="code"></td></tr>`)
  }
  html.push("</tbody></table>");
  document.getElementById("container").innerHTML = html.join("");
});

$(document).ready(function() {
    var y = 0;
    $("input[type='checkbox']").onclick(function(){
    var code1 = $("input[name='code']:checked").val();
    for (var x = 0; x < code1.length; x++) {
        if ($(this).prop("checked") == true){
            window.addEventListener("load", function() {
                html1.push("<table><tr>");
                y = y + 1;
                html1.push(`<tr><th>${y}</th><td>${a[x]}</td><td>${b[x]}</td><td>${c[x]}</td></tr>`);
                html.push("</table>");
            });
        });

1 Ответов

Рейтинг:
0

W∴ Balboos, GHB

Вот смысл того, как это сделать (а не код!). Это нет самый эффективный способ сделать это, но легко объяснимый. Он будет изменять вторую таблицу каждый раз, когда вы устанавливаете (или снимаете) какие-либо флажки в первой таблице.

1 - Дайте вашему флажку имя, связанное со значением (которое является вашим номером строки). Это должно быть сгенерированное имя типа 'ЦКК'+я
2 - Создайте событие oncheck или oncheckedchanged для каждого флажка - все они переходят к одной и той же функции (независимо от того, что вам больше подходит)
3 - функция написана таким образом, чтобы пройти через список флажков, используя их сгенерированные имена, прокручивая их по циклу. Эта функция строит строку для содержимого таблицы только из отмеченных флажков. Эта строка восстанавливается из пустой каждый раз, когда изменяется флажок коробки.
4 - правая боковая таблица обновляется с помощью document.getElementByID('table_two_ID').innerHTML с помощью законченный строка из функции.

Этот метод строит таблицу в том же порядке, что и исходная, но только с проверенными элементами. Это не единственное решение этой проблемы