Javascript：更改表格行 HTML

Posted 2023-05-07

【中文标题】Javascript：更改表格行 HTML

【英文标题】：Javascript: Change table row HTML

【发布时间】：2019-02-10 08:50:40

【问题描述】：

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

我需要检查报价单中的特定部件号，如果存在，我需要更改该行的 HTML。

这是 HTML 的 sn-p

    <div id="line-items-section" class="section">
<table id="line-item-detail-table" class="table-001">
<tr>
    <!-- <th>
    </th> -->
    <th>
        QTY
    </th>
    <th >
        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 的单元格的表格行

【问题讨论】：

请附上sn-p

我是否理解正确，您有多个行跟随标有class="row-product" 的表格行的标记？

@Barthy - 报价软件将生成多个表格行 (class="row-product") - 每个产品一个表格行。报价单上可能有一种产品，或报价单上有 100 种产品。每个人都有一个新的新表格行。

【参考方案1】：

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

例如这样：

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

【讨论】：

太棒了！请记住，重复的 ID 在这里也是一个问题，因为它们是无效的 HTML。