-1

есть таблица, как записать данные с ячеек в json массив вида {data-name: "значение ячейки" }

<table  class="heavyTable" contenteditable="true">
                    <thead>
                        <th>Date</th>
                        <th>Due Date</th>
                        <th>RUB</th>
                        <th>EUR</th>
                        <th>Debit</th>
                        <th>Credit</th>
                        <th>Balanse</th>
                    </thead>
                    <tbody>
                        <tr data-id="" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="duedate">2</td>
                            <td data-name="rub">3</td>
                            <td data-name="eur">1</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="balanse">3</td>
                        </tr>
                        <tr data-id="" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="duedate">2</td>
                            <td data-name="rub">3</td>
                            <td data-name="eur">1</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="balanse">3</td>
                        </tr>
                        <tr data-id="" data-new="0">
                            <td data-name="hdate">1</td>
                            <td data-name="duedate">2</td>
                            <td data-name="rub">3</td>
                            <td data-name="eur">1</td>
                            <td data-name="debit">2</td>
                            <td data-name="credit">3</td>
                            <td data-name="balanse">3</td>
                        </tr>
                        <tr data-id="" data-new="1">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>

я сделал запись в массив, но в консоле выдает пустые значения, и не могу понять как записать в json здесь

$(".save").click(function(){
let table = document.getElementsByTagName('table')[0];
let arr = table.children[1].children;
let results = [];
for (let j = 0; j < arr.length; j++) {
  for (let i = 0; i < arr[j].attributes.length; i++) {
    if (arr[j].attributes[i].name == 'data-new' && arr[j].attributes[i].value == 1) {
      for (let k = 0; k < arr[j].children.length; k++) {
        results.push(arr[j].children[k].innerHTML)
      }
      break;
    }
  }
}
console.log(results);
});

введите сюда описание изображения

0

1 ответ 1

1

Написал по быстрому, на коленке, нужно будет доработаете:

Array.prototype.chunk = function (n) {
    if (!this.length) {
        return [];
    }
    return [this.slice(0, n)].concat(this.slice(n).chunk(n));
};
var table = $.parseHTML($('.heavyTable').html()),
        thead = $('th', table[0].children).toArray().filter(arr => arr.innerText),
        tbody = $('td', table[1].children).toArray().filter(arr => arr.innerText).chunk(thead.length),
        json = {},
        temp = [];

Дальше пишем:
Первый вариант циклами for:

for (var i = 0; i < tbody.length; ++i) {
    var arr = tbody[i];
    for (var l = 0; l < arr.length; ++l) {
        var key = thead[l].innerText.trim(), td = arr[l];
        !json[key] && (json[key] = {});
        json[key][$(td).data('name')] = td.innerText;
    }
    temp.push(json);
    json = {};
}

Второй вариант циклами forEach:

tbody.forEach((tb) => {
    tb.forEach((td, i) => {
        var key = thead[i].innerText.trim();
        !json[key] && (json[key] = {});
        json[key][$(td).data('name')] = td.innerText;
    });
    temp.push(json);
    json = {};
});

После этого делаем так:

json = JSON.stringify(temp);
console.log(json);

И получаем:

[{
    "Date": {
        "hdate": "1"
    },
    "Due Date": {
        "duedate": "2"
    },
    "RUB": {
        "rub": "3"
    },
    "EUR": {
        "eur": "1"
    },
    "Debit": {
        "debit": "2"
    },
    "Credit": {
        "credit": "3"
    },
    "Balanse": {
        "balanse": "3"
    }
}, {
    "Date": {
        "hdate": "1"
    },
    "Due Date": {
        "duedate": "2"
    },
    "RUB": {
        "rub": "3"
    },
    "EUR": {
        "eur": "1"
    },
    "Debit": {
        "debit": "2"
    },
    "Credit": {
        "credit": "3"
    },
    "Balanse": {
        "balanse": "3"
    }
}, {
    "Date": {
        "hdate": "1"
    },
    "Due Date": {
        "duedate": "2"
    },
    "RUB": {
        "rub": "3"
    },
    "EUR": {
        "eur": "1"
    },
    "Debit": {
        "debit": "2"
    },
    "Credit": {
        "credit": "3"
    },
    "Balanse": {
        "balanse": "3"
    }
}]

А вообще, есть еще библиотека, может пригодиться: Table To JSON, а тут можно глянуть пример

5
  • у меня пустые скобки []
    – Aslero
    29 мая 2018 в 18:01
  • и как еще можно записать атрибут data-id="" и data-new="0"
    – Aslero
    29 мая 2018 в 18:16
  • @Aslero, данный код рабочий полностью, проверил по данной вами таблице которая в вопросе. Результат также оформил, в чем у вас проблемы, понятия не имею.
    – And
    30 мая 2018 в 1:28
  • а как еще не пойму, делать чтобы добавлял все строки и атрибут, например если data-id пустое то вставить значение new
    – Aslero
    30 мая 2018 в 3:16
  • @Aslero, добавьте какое нужно условие и будет вам счастье. Или вы предлагаете мне за вас все делать? Я и так за вас написал. А вы не удосужились выбрать в качестве решения. А решение ведь правильное и рабочее.
    – And
    30 мая 2018 в 5:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.