在循环中向 HML 标签元素插入唯一属性

Question

我有一个使用各种js的超级网站，包括backbone.js和underscore.js。在我的一个页面上，我有下面的一段代码：

<#loop:main_tlds_price_add#>
   <tr>
      <td data-label="Domains" id="<#tag:main_tlds_price_add[].classkey /#>">
         .<#tag:main_tlds_price_add[].name /#>
      </td>
      <#loop:main_tlds_price_add[].price#>
      <td data-label=""> <#tag:main_tlds_price_add[].price[] /#></td>
          <#/loop:main_tlds_price_add[].price#>
  </tr>
<#/loop:main_tlds_price_add#>

输出看起来像这样

<tr>
   <td>.co.uk</td>
   <td>£2.32</td>
   <td>£4.32</td>
   <td>£5.32</td>
</tr>
<tr>
   <td>.com</td>
   <td>£2.32</td>
   <td>£14.32</td>
   <td>£50.32</td>
</tr>
<tr>
   <td>.ads</td>
   <td>£12.32</td>
   <td>£14.32</td>
   <td>£25.32</td>
</tr>

但是我想要的是这样的，将新属性“data-label”注入到循环中的 td 标签中，如下所示：

<tr>
   <td data-label="tld">.co.uk</td>
   <td data-label="1 year">£2.32</td>
   <td data-label="2 years">£4.32</td>
   <td data-label="5 years">£5.32</td>
</tr>
<tr>
   <td data-label="tld">.com</td>
   <td data-label="1 year">£2.32</td>
   <td data-label="2 years">£14.32</td>
   <td data-label="5 years">£50.32</td>
</tr>
<tr>
   <td data-label="tld">.ads</td>
   <td data-label="1 year">£12.32</td>
   <td data-label="2 years">£14.32</td>
   <td data-label="5 years">£25.32</td>
</tr>

我思考过、研究过 JS，但我对 JS 的了解还没有那么深。

希望有人能帮忙。

Answer 1

经过多次菜鸟尝试，例如：

<#loop:main_tlds_price_add#>
   <script type="text/javascript"> 
      var n = 0; var dynamicYear = ['5 Years','1 Year', '2 Years'];
   </script>
   <tr>
      <td data-label="Domains" id="<#tag:main_tlds_price_add[].classkey /#>">
         .<#tag:main_tlds_price_add[].name /#>
      </td>
      <#loop:main_tlds_price_add[].price#>
      <script type="text/javascript"> 
         $("[data-label='']").attr('data-label', dynamicYear[n]);n++;
      </script>
      <td data-label=""> <#tag:main_tlds_price_add[].price[] /#></td>
      <#/loop:main_tlds_price_add[].price#>
   </tr>
<#/loop:main_tlds_price_add#>

产生了我想要的结果，我设法对其进行了改进，如下所示：

<script type="text/javascript">
    // non-dynamic header element
    const nonDynamicElements = ['1 Year', '2 Years', '5 Years'];

    // Function to inject non-dynamic elements into the table
    function injectNonDynamicElements(containerId, elements) {
        // Get the container
        const container = document.getElementById(containerId);

        // Get all rows in the container
        const rows = container.querySelectorAll('tbody tr');

        // Loop through each row
        rows.forEach(row => {
            // Get all <td> elements within the row with the placeholder
            const tds = row.querySelectorAll('td[data-label=""]');

            // Ensure there are enough non-dynamic elements to match the generated elements
            if (tds.length !== elements.length) {
                console.error('The number of generated elements does not match the number of non-dynamic elements.');
            } else {
                // Loop through the generated <td> elements and inject the non-dynamic elements
                tds.forEach((td, index) => {
                    td.setAttribute('data-label', elements[index]);
                });
            }
        });
    }
    // Call the function for the table with id 'priceTable'
    injectNonDynamicElements('priceTable', nonDynamicElements);
</script>