Как зациклить элементы, которые являются членами класса, чтобы получить данные и превратить эти данные в объект?

Question

У меня есть странный случай, когда мне нужно выполнить цикл с Javascript над элементами HTML с именем класса ui-selected, чтобы получить данные, связанные с этим классом, и вставить полученные данные в атрибуты объекта для дальнейшей манипуляции данными.В идеале цель заключается в том, чтобы при щелчке нескольких строк в таблице HTML они могли загружать выбранные строки в файл CSV.

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

Вот что я до сих пор использую с помощью jQuery, но я, вероятно, постараюсь отказаться от него.jQuery:

$('#downloadBtn').click(function() {

    $('.ui-selected').each(function(index, value) {

            $(value).find('td').slice(0,2).each(function(i, v) {

                var tdText =  $(v).text();

                    if([0,1].indexOf(i) > -1) {
                        copyText += tdText + ',';
                        if([0,1].indexOf(i) == 1) {
                        copyText += '\n';
                        }
                    }

            });

        });
        console.log("CopyText : " + copyText)
});

В принципе, простой способ подумать о том, что я пытаюсь выполнить, - мне нужна функциональность, позволяющая выбирать несколько строк в таблице HTML, и когда я нажимаю «загрузить», он должен захватывать только«выбранные» строки и превратить их в файл CSV для последующей загрузки.

Вот как выглядит таблица в HTML (я использую библиотеку DataTable из jQuery):

<table id="icpTable" class="cell-border " width="95%" align="center" style="margin-top: 20px;"> 
    <thead>
        <tr>
            <th>
                <strong>Customer Name</strong>
            </th>
            <th style="width: 20%">
                <strong>Tester Note</strong>
            </th>
            <th>
                <strong>Crucible No.</strong>
            </th>
            <th>
                <strong>Dry Weight</strong>
            </th>
            <th>
                <strong>Wet Weight</strong>
            </th>
            <th>
                <strong>Moisture</strong>
            </th>
            <th>
                <strong>Corrected WW</strong>
            </th>
            <th>
                <strong>Volume</strong>
            </th>
            <th>
                <strong>Dilution</strong>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
           <td>Example Customer Inc.</td>
           <td>SL-001-01-01</td>
           <td>123~01~01</td>
           <td>1.0000</td>
           <td>1.1233</td>
           <td></td>
           <td>1.012</td>
           <td>0.02</td>
           <td>0.0001</td>
        </tr>
        <tr>
           <td>Example Customer2 Inc.</td>
           <td>SL-002-01-01</td>
           <td>124~01~01</td>
           <td>1.0000</td>
           <td>1.1233</td>
           <td></td>
           <td>1.012</td>
           <td>0.02</td>
           <td>0.0001</td>
        </tr>
   </tbody>
</table>

Мне действительно нужны только столбцы буксировки из таблицы.Tester Note и Customer Name соответственно.Таким образом, CSV будет выглядеть примерно так:

2018-18-10, 'Sample','Standard', 'test', (Customer Name),(Tester Note), 0.2,'','Tester','A1'

Редактировать:

Я играл с этим, и это то, что ядо сих пор:

$('.ui-selected').each(function(index, value) {

    var row = table.insertRow(-1);

    $(value).find('td').each(function(i, v) {

        var tdText =  $(v).text();
            console.log(tdText)
    });
});

Так что это, по крайней мере, дает мне отдельные фрагменты данных.Теперь мне нужно только взять первый и второй кусок и присвоить его переменной.

Вот что я получаю в своем console.log:

Example corp.
Example-066-1-S2
1~1~1
1.0003
1.0150

0.9993
100
100.0686

Answer 1

$('#downloadBtn').click(function() {
    let csv = "Customer Name, Tester Note\n";
    let elementarray = document.getElementsByClassName('ui-selected');

    for (i = 0; elementarray.length > i;i++) {
        var dataTags = elementarray[i].getElementsByTagName('td');
        var dataArr = [];
        dataArr.push(dataTags[0].innerText.trim());
        dataArr.push(dataTags[1].innerText.trim());
        csv += dataArr.join(', ') + "\n";
    }

    var a = document.createElement("a");
    a.href = "data:text/csv;charset=utf-8,"+ encodeURI(csv);
    a.download = "data.csv";
    a.click();
});

Вот попробуйте это.

Вот вывод, который я получаю.