Javascript: Change table row HTML

Question

I'm creating a template for our companies quoting software, which generates a HTML page and populates a table dynamically with each quoted item being a new row.

I need to check for a specific part number within the quote, and if it's present i then need to change the HTML for that row.

Here's a snippet of the HTML

    <div id="line-items-section" class="section">
<table id="line-item-detail-table" class="table-001">
<tr>
    <!-- <th>
    </th> -->
    <th>
        QTY
    </th>
    <th width="70%">
        Item
    </th>
    <th>
        Unit Price
    </th>
    <th>
        Ext Price
    </th>
</tr>
[Begin_LineItem] [Begin_LineTypeProduct]
<tr id="canChange" class="row-product">
    <!-- <td class="col-option-box">
        [QV_OptionBox]
    </td> -->
    <td class="col-qty">
        [DI_QtyBase]
    </td>
    <td class="col-partnumber">
        [DI_ManufacturerPartNumber]
    </td>
    <td class="col-unit-price">
        [DI_UnitPrice:f=1]
    </td>
    <td class="col-extended-price">
        [DI_ExtendedPrice:f=1]
    </td>
</tr>

<tr class="row-product-description">
    <!-- <td class="col-option-box">
        [QV_OptionBox]
    </td> -->
    <td class="col-qty">
    </td>
    <td colspan="3" class="col-description">
        [DI_Description]
    </td>
</tr>
[End_LineTypeProduct]

I then have this Javascript file:

var matches = document.querySelectorAll("td.col-partnumber");
    for(var value of matches.values()) {
        //console.log(value.innerText);
        if (value.innerText == "SLAB KIT FORM") {
            var str = '<tr class="row-comment"><td class="col-qty"></td><td colspan="4" class="col-description">[DI_Description]</td></tr>';
            var Obj = document.getElementById('canChange');
            Obj.outerHTML = str;
        }
    }

I'm using querySelectorAll and the For loop to find the part number I want (I'm looking for 'SLAB KIT FORM'). Then using outerHTML to change the HTML.

This partially works.

The result is, the part number is found, but the code changes only the first row in the table... the table row I'm looking for could appear anywhere in the table (and even multiple times in the same table).

Essentially, I need to have this code target only the table row that contains the cell with SLAB KIT FORM

Answer 1

You shouldn't add the same id to each row. Once you have found the right table cell through javascript, you can find the appropriate row through the parentNode property.

For example like this:

window.addEventListener('load', function() {
  const button = document.querySelector('.run-script')
  button.addEventListener('click', function() {
    var matches = document.querySelectorAll("td.col-partnumber");
    for (var value of matches.values()) {
      // console.info(value);
      if (value.innerText == "SLAB KIT FORM") {
        var str = '<tr class="row-comment"><td class="col-qty"></td><td colspan="4" class="col-description">[DI_Description]</td></tr>';
        var Obj = value.parentNode;
        Obj.outerHTML = str;
      }
    }
  })
})

button {
 padding: 1rem;
 background-color: darkred;
 color: white;
 margin-bottom: 1rem;
 width: 25%;
 min-width: 200px;
 font-size: 1.2rem;
 text-transform: uppercase;
 cursor: pointer;
}

table {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

table td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}

table tr:nth-child(even){background-color: #f2f2f2;}

table tr:hover {background-color: #ddd;}

table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

<button class="run-script" type="button">Run Script</button>

<div id="line-items-section" class="section">
  <table id="line-item-detail-table" class="table-001">
    <tr>
      <!-- <th>
        </th> -->
      <th>
        QTY
      </th>
      <th width="70%">
        Item
      </th>
      <th>
        Unit Price
      </th>
      <th>
        Ext Price
      </th>
    </tr>
    <tr class="row-product">
      <td class="col-qty">
        5
      </td>
      <td class="col-partnumber">
        NOT THE PARTNUMBER YOU'RE LOOKING FOR
      </td>
      <td class="col-unit-price">
        40
      </td>
      <td class="col-extended-price">
        forty
      </td>
    </tr>

    <tr class="row-product-description">
      <td class="col-qty">
      </td>
      <td colspan="3" class="col-description">
        some description
      </td>
    </tr>
    <tr class="row-product">
      <td class="col-qty">
        8
      </td>
      <td class="col-partnumber">
        SLAB KIT FORM
      </td>
      <td class="col-unit-price">
        20
      </td>
      <td class="col-extended-price">
        twenty
      </td>
    </tr>

    <tr class="row-product-description">
      <td class="col-qty">
      </td>
      <td colspan="3" class="col-description">
        other description
      </td>
    </tr>
  </table>
</div>