Блог

У меня есть динамическая таблица, где мне нужно суммировать значения в определенном столбце, лучшим способом для достижения этой цели было бы присвоение свойства id каждой строке. Я сосредоточен только на настройке и идентификаторе для каждого <td> в каждой строке таблицы. ОБНОВЛЕНИЕ: у меня есть все 4 ключа в <td> , но я бы хотел, чтобы каждый <td> соответствовал значению.

JavaScript:

 var prodArr = [];
data = [{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}];   

function buildTable(data){
    var table = document.getElementById('table');
    const arr = data;
    for(var obj of arr){
        var row = document.createElement('tr');
        row.setAttribute('id', Object.values(obj)[0]);
        //redo this id stuff to maintain insert integrity for each column in the row.
        for(var val of Object.values(obj)){
            var col = document.createElement('td');
            col.textContent = val;
            row.appendChild(col);
            col.setAttribute('class', Object.keys(obj));
        }
        var targetCell = row.getElementsByTagName("td");
        targetCell[0].setAttribute('class', 'txtSku');
        targetCell[1].setAttribute('class', 'txtRetailPrice');
        targetCell[2].setAttribute('class', 'txtListPrice');
        targetCell[3].setAttribute('class', 'txtProductName');
        var input = document.createElement('input');
        input.setAttribute('type', 'text');
        //input.setAttribute('')
        row.appendChild(input);
        table.appendChild(row);
    }
}
buildTable(data);
 

HTML:

 <table id="table">
                 
                 <tr>
                    <th><label>SKU:</label></th>
                    <th><label>Retail Price:</label></th>
                    <th><label>List Price</label></th>
                    <th><label>Product Name</label></th>
                    <th><label>Quantity</label></th>
                 </tr>

                 <tfoot>
                    <th><label id = "lblTotal">Total:</label><input type="text" name="txtTotal" id = "txtTotal">
                       <input type="button" value= "Add" id = "addTotals"> 
                    </th>
                 </tfoot>
</table>
 

По завершении я бы хотел, чтобы разметка html выглядела так:

 <table id="table">
                 
    <tr>
        <td><input type="text" name="txtCustomerName" id = "txtCustomerName"></td>
        <td><input type="text" name="txtPhone" id = "txtPhone"></td>
        <td><input type="text" name="txtEmail" id= "txtEmail"></td>
        <td><input type="text" name="txtRopo" id= "txtRopo"></td>
        <td><input type="text" name="txtAddress" id= "txtAddress"></td>
    </tr>
    <tr>
        <th><label>SKU:</label></th>
        <th><label>Retail Price:</label></th>
        <th><label>List Price</label></th>
        <th><label>Product Name</label></th>
        <th><label>Quantity</label></th>
    </tr>
    <tr>
        <td id="SKU">9372983-382L</td>
        <td id="retailPrice">11.75</td>
        <td id="listPrice">3.50</td>
        <td id="prodName">Tennis balls</td>
        <td id="quantity">1</td>
    </tr>
    <tfoot>
    <th><label id = "lblTotal">Total:</label><input type="text" name="txtTotal" id = "txtTotal">
        <input type="button" value= "Add" id = "addTotals"> 
    </th>
    </tfoot>
</table>
 

https://codepen.io/Postman507/pen/mdrKZoY

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

 tr.id("id" i)
 

Будет невозможно получить более 1 элемента, используя ID . Вместо этого используйте класс. Чтобы добавить только 1 класс, вы можете использовать HTMLElement.className="class_name" . Чтобы добавить больше, вы можете использовать HTMLElement.classList.add("class_name")

проблема действительно в вашем элементе данных. Попробуйте сделать что-то вроде этого:

 data= {row1:{names:[],ids:[]},
       row2:{labels:[]},
       row3:{ids[]}}
 

очевидно, заполнение массивов вашими данными. Затем в вашем js вы можете создать свою таблицу и добавить классы и идентификаторы по мере необходимости.

Решением было использование свойств таблиц для получения строк, после чего я смог получить доступ к данным ячейки, используя это вне последнего цикла for, но внутри первого:

 var targetCell = row.getElementsByTagName("td");
targetCell[0].setAttribute('class', 'txtSku');
targetCell[1].setAttribute('class', 'txtRetailPrice');
targetCell[2].setAttribute('class', 'txtListPrice');
targetCell[3].setAttribute('class', 'txtProductName');