Javascript：更改表格行HTML

我正在为我们公司的报价软件创建一个模板，它生成一个HTML页面并动态填充一个表格，每个报价项都是一个新行

我需要检查报价中的特定零件号，如果有，我需要更改该行的HTML

下面是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]

然后我有了这个Javascript文件：

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;
        }
    }

我正在使用querySelectorAll和For循环查找我想要的零件号我正在查找“SLAB KIT FORM”。 然后使用outerHTML更改HTML

这部分起作用

结果是，找到了零件号，但代码仅更改表中的第一行。。。我要查找的表行可能出现在表中的任何位置，甚至在同一个表中多次出现

---

本质上，我只需要让这段代码针对包含SLAB KIT FORM单元格的表行

您不应该向每一行添加相同的id。一旦通过javascript找到了正确的表单元格，就可以通过parentNode属性找到相应的行

例如：

window.addEventListener'load'，函数{ const button=document.querySelector'.运行脚本' 按钮。addEventListener“单击”功能{ var matches=document.querySelectorAlltd.col-partnumber； 对于matches.values的var值{ //console.infovalue； 如果value.innerText==板套件形式{ var str='[DI_Description]'； var Obj=value.parentNode； Obj.outerHTML=str； } } } } 钮扣{ 填充：1rem； 背景色：暗色； 颜色：白色； 边缘底部：1rem； 宽度：25%； 最小宽度：200px； 字号：1.2rem； 文本转换：大写； 光标：指针； } 桌子{ 字体系列：投石机MS，Arial，Helvetica，无衬线； 边界塌陷：塌陷； 宽度：100%； } 表td，客户数量{ 边框：1px实心ddd； 填充：8px； } 表tr:nth child偶数{背景色：f2f2；} 表tr:hover{背景色：ddd；} 表th{ 填充顶部：12px； 垫底：12px； 文本对齐：左对齐； 背景色：4CAF50； 颜色：白色； } 运行脚本 -> 数量 项目 单价 外部价格 5. 不是你要找的零件号 40 四十 一些描述 8. 板坯套件表格 20 二十 其他说明

---

请附上代码片段我是否理解正确，您有多个行跟随标有class=row product的表行标记？@Barthy-报价软件将生成多个表行class=row product-每个产品一个表行。报价单上可能有一种产品，也可能有100种产品。每个人都有一个新的桌子行。太好了！请记住，重复ID在这里也是一个问题，因为它们是无效的HTML。