I try various code already but it seems I cannot update the text inside my table
I try various way from looping tr and google everything but still not reflected on my table
I expecting in my #tableModel should be reflecting after I click the button Add but come back disappointed because nothing happen. I did my Google research and try everything almost 3 hour but found nothing.
rowM = 1;
function addAccessory() {
let tableM = document.getElementById("tableModel");
// Insert data to cells
var accFrame = "cake"
var accFoam = "to"
var accLegBase = "eat"
var Desc = "yumm"
var trs = tableM.getElementsByTagName("tr")[rowM - 1];
var tds = trs.getElementsByTagName("td");
var tdFrame = trs.getElementsByTagName("td")[8];
var tdFoam = trs.getElementsByTagName("td")[9];
var tdLeg = trs.getElementsByTagName("td")[10];
var tdDesc = trs.getElementsByTagName("td")[5];
for (var i = 0; i <= tds.length; i++) {
//tds[i].innerHTML = items[i].style.height;
if (i == 8) {
//frame
tds[i].innerText = accFrame
} else if (i == 9) {
//foam
tds[i].innerText = accFoam
} else if (i == 10) {
//Leg/Base
tds[i].innerText = accLegBase
} else if (i == 5) {
tds[i].innerText = Desc
}
}
}<table class="table table-bordered" id="tableModel">
<thead>
<tr>
<th class="text-left" style="border: 1px solid gray;">No</th>
<th class="text-left" style="border: 1px solid gray;">Action</th>
<th class="text-left" style="border: 1px solid gray;">Product Category</th>
<th class="text-left" style="border: 1px solid gray;">Model</th>
<th class="text-left" style="border: 1px solid gray;">Code</th>
<th class="text-left" style="border: 1px solid gray;">Description</th>
<th class="text-left" style="border: 1px solid gray;">Color</th>
<th class="text-left" style="border: 1px solid gray;">Accessory</th>
<th class="text-left" style="border: 1px solid gray;">Frame</th>
<th class="text-left" style="border: 1px solid gray;">Foam</th>
<th class="text-left" style="border: 1px solid gray;">Leg/Base</th>
<th class="text-left" style="border: 1px solid gray;">Total Unit Price</th>
<th class="text-left" style="border: 1px solid gray;">Qty</th>
<th class="text-left" style="border: 1px solid gray;">Subtotal</th>
<th class="text-left" style="border: 1px solid gray;">Remark</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<button class="trashben btn btn-outline-primary" style="border-width: 2px;">
<i class="fas fa-pencil"></i>
</button>
<button class="trashben btn btn-outline-danger" style="border-width: 2px;">
<i class="fas fa-trash-alt"></i>
</button>
<button type="button" class="btn btn-outline-primary" id="partial-submit">C</button>
</td>
<td>Prod Test</td>
<td>Model Test</td>
<td>0011</td>
<td>model testing</td>
<td>grey</td>
<td>
<button class="edit_button" role="button" onclick="addAccessory()"><i class="fa-solid fa-pen-to-square"></i>Add</button></a>
</td>
<td>W</td>
<td>L</td>
<td>B</td>
<td>100</td>
<td>2</td>
<td>200</td>
<td>testing</td>
</tr>
</tbody>
</tr>
</table>
2
Answers
I think I would target each button and find its nearest row so that you have better control over which rows you are trying to update depending on your table’s content here’s a refactored version where I have moved the parts of your js operation into smaller, more test friendly functions.
By targeting the nearest row to clicked button you should be able to control each of the rows individually.
Hope this helps you out! Have a great day!
Please delegate, it makes the code much simpler and easier to modify.
I changed the ID of the partial submit to a class and the class "trashben" to "delete" and changed the class of the edit button to "edit" instead of "trashben"