HTML 表格 - 如果列包含特定符号，则替换列中的值答案

【问题标题】：HTML Table - Replace values in columns if the column contains a specific symbolHTML 表格 - 如果列包含特定符号，则替换列中的值
【发布时间】：2018-08-13 13:20:14
【问题描述】：

如果列中包含星号 (*)，我需要编写一个 JavaScript/JQuery 函数，用 - 替换列中的整数值。

一直在尝试寻找替换表中值的合适示例，但只找到了在列包含值时返回 true 或 false 的函数。

我需要检查表中的所有列，并且仅当字段包含整数值时才替换列中出现一个或多个 * 符号的位置。

提供了一个示例表，其中包含 * 符号作为参考：

<table class="users">
                        <tbody><tr>
                                <th scope="row"></th>
                                <th scope="col">May17 - Apr18</th>
                                <th>Jun17 - May18</th>
                                <th>Jul17 - Jun18</th>
                                <th>Aug17 - Jul18</th>
                                <th>Sep17 - Aug18</th>
                                <th>Oct17 - Sep18</th>
                                <th>Nov17 - Oct18</th>
                                <th>Dec17 - Nov18</th>
                                <th>Jan18 - Dec18</th>
                                <th>Feb18 - Jan19</th>
                                <th>Mar18 - Feb19</th>
                                <th>Apr18 - Mar19</th>
                                <th>May18 - Apr19</th>
                                <th>Jun18 - May19</th>
                        </tr>
                        <tr>
                                <td>Opiate</td>
                                <td>8</td>
                                <td>9</td>
                                <td>9</td>
                                <td>-</td>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                                <td>12</td>
                                <td>13</td>
                                <td>13</td>
                                <td>12</td>
                                <td>12</td>
                                <td>11</td>
                        </tr>
                        <tr>
                                <td>Non-opiate only</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>-</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                        </tr>
                        <tr>
                                <td>Non-opiate and Alcohol</td>
                                <td>8</td>
                                <td>8</td>
                                <td>8</td>
                                <td>-</td>
                                <td>6</td>
                                <td>6</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                        </tr>
                        <tr>
                                <td>Alcohol only</td>
                                <td>12</td>
                                <td>11</td>
                                <td>13</td>
                                <td>-</td>
                                <td>15</td>
                                <td>17</td>
                                <td>21</td>
                                <td>20</td>
                                <td>21</td>
                                <td>23</td>
                                <td>24</td>
                                <td>24</td>
                                <td>24</td>
                                <td>24</td>
                        </tr>

                </tbody></table>

【问题讨论】：

你能分享你的 HTML 表格的 sn-p 吗？是否有任何理由不能在 HTML 标记中使用数据属性，因为那将是最佳选择。您还发布了您尝试修改的原始功能，您可以使用您当前尝试的内容更新它吗？
不倾向于使用数据属性，我需要的功能是情境性的，我只需要将其应用于已注销的用户，还提供了我需要的表之一适用于
好的，现在我也读到了，您对要替换的内容的解释有点混乱。我在想，从示例中 - may17th 更改为 '-' 就这样了吗？

标签： javascript jquery html-table

【解决方案1】：

我已经开始为您制定解决方案，如果我走在正确的轨道上，请告诉我，我会完成它。这只是一个概念证明，我将数据转换为“红色”。

首先Jquery选择列：

/* Set all the cells in columns with * in the heading to red */
columnTh = $("table td:contains('*')"); 
// Get the index & increment by 1 to match nth-child indexing
columnIndex = columnTh.index() + 1; 
// Set all the elements with that index in a tr red
$('table tr td:nth-child(' + columnIndex + ')').css("color", "#F00");

在这里的 jsfiddle 中处理这个问题：http://jsfiddle.net/2xU8t/549/

我是否接近正确的想法？告诉我，我会继续。

更新的答案 - 扩展了我之前发布的内容并更新了小提琴：http://jsfiddle.net/tremor/2xU8t/603/

var parentTH = []; 
var cells = $("td:contains('*')");

cells.each(function (key, value) {
 if (value.textContent == "*") {
  var $th = $(value).closest('table').find('th').eq(value.cellIndex); 
  if (!parentTH.includes($th[0])) {
   parentTH.push($th[0]);
  } 
 }
});

for (var i = 0; i < parentTH.length; i++) {
 columnTh = $(parentTH[i]); 
 columnIndex = columnTh.index() + 1; 
 $('table tr td:nth-child(' + columnIndex + ')').each(function (key, value) {
   var thisKey = key + 1;
   if (!isNaN(value.innerText)) {
     value.innerHTML = "-";
     $(value).css("color", "#F00");
   }
 });
};

【讨论】：

是的，这非常正确，选择器只需要识别数值，而找到的 * 需要保留
@CryoFusion87 - 我已经根据原始概念更新了我的小提琴，我在适当的地方用“-”替换了整数，并将它们涂成红色以提高可见度。

【解决方案2】：

如果您只是尝试替换 *，请使用 ':contains()' 选择器选择那些 DOM 元素，然后根据需要更新文本：

$(function(){
  $("td:contains(*)").text("------");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="users">
                        <tbody><tr>
                                <th scope="row"></th>
                                <th scope="col">May17 - Apr18</th>
                                <th>Jun17 - May18</th>
                                <th>Jul17 - Jun18</th>
                                <th>Aug17 - Jul18</th>
                                <th>Sep17 - Aug18</th>
                                <th>Oct17 - Sep18</th>
                                <th>Nov17 - Oct18</th>
                                <th>Dec17 - Nov18</th>
                                <th>Jan18 - Dec18</th>
                                <th>Feb18 - Jan19</th>
                                <th>Mar18 - Feb19</th>
                                <th>Apr18 - Mar19</th>
                                <th>May18 - Apr19</th>
                                <th>Jun18 - May19</th>
                        </tr>
                        <tr>
                                <td>Opiate</td>
                                <td>8</td>
                                <td>9</td>
                                <td>9</td>
                                <td>-</td>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                                <td>11</td>
                                <td>12</td>
                                <td>13</td>
                                <td>13</td>
                                <td>12</td>
                                <td>12</td>
                                <td>11</td>
                        </tr>
                        <tr>
                                <td>Non-opiate only</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>-</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                        </tr>
                        <tr>
                                <td>Non-opiate and Alcohol</td>
                                <td>8</td>
                                <td>8</td>
                                <td>8</td>
                                <td>-</td>
                                <td>6</td>
                                <td>6</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                                <td>*</td>
                        </tr>
                        <tr>
                                <td>Alcohol only</td>
                                <td>12</td>
                                <td>11</td>
                                <td>13</td>
                                <td>-</td>
                                <td>15</td>
                                <td>17</td>
                                <td>21</td>
                                <td>20</td>
                                <td>21</td>
                                <td>23</td>
                                <td>24</td>
                                <td>24</td>
                                <td>24</td>
                                <td>24</td>
                        </tr>

                </tbody></table>

所以我过于简单化了。您不想简单地清空这些字段，而是要清空这些列。第一行会一直是头吗？如果是这样，我可能会将其移动到一个 thead 元素中，并为您将要操作的数据保留 tbody。

我认为这样做的原因是，它使代码更容易一些。首先，您要遍历所有行，并检查每个 td 是否有星号。如果找到，将该 td 的索引推送到包含所有要隐藏的列的数组上。完成后，您将拥有一个包含所有带有 * 的列的数组，无论它位于哪一行。然后，重新遍历每一行，将其 :nth-child td 设置为您想要的字符。像这样的：

$(function() {
  // This will be used to contain column indexes
  let columnIndexesToHide = [];
  // Iterate over each row...
  $("tr").each(function() {
    let row = $(this);
    // ...find each td within that row...
    row.find("td").each(function() {
      let cell = $(this);
      // ... and check if it contains an asterisk.
      if (cell.text().indexOf("*") !== -1) {
        // Additionally, have we already stored this column?
        if (!columnIndexesToHide.includes(cell.index())) {
          columnIndexesToHide.push(cell.index());
        }
      }
    })
  })
  /**
   * At this point, we have a list of columns that need to
   *  be hidden.
   * Using that column value, we can tell each row to hide
   *  the relevant column. By moving the header into the
   *  thead el, we can simply use tbody. Otherwise, we have
   *  to do some gymnastics to preserve the first tr but 
   *  replace the others. Assuming you don't also have a 
   *  tfoot row. or whatever.
   **/
  $.each(columnIndexesToHide, function(index, value) {
    let col = value + 1;
    $("tbody tr :nth-child(" + col + ")").each(function() {
      let cell = $(this);
      if (cell.text().indexOf("*") == -1 ) cell.text("--");
    })
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="users">
  <thead>
    <tr>
      <th scope="row"></th>
      <th scope="col">May17 - Apr18</th>
      <th>Jun17 - May18</th>
      <th>Jul17 - Jun18</th>
      <th>Aug17 - Jul18</th>
      <th>Sep17 - Aug18</th>
      <th>Oct17 - Sep18</th>
      <th>Nov17 - Oct18</th>
      <th>Dec17 - Nov18</th>
      <th>Jan18 - Dec18</th>
      <th>Feb18 - Jan19</th>
      <th>Mar18 - Feb19</th>
      <th>Apr18 - Mar19</th>
      <th>May18 - Apr19</th>
      <th>Jun18 - May19</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Opiate</td>
      <td>8</td>
      <td>9</td>
      <td>9</td>
      <td>-</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
      <td>13</td>
      <td>12</td>
      <td>12</td>
      <td>11</td>
    </tr>
    <tr>
      <td>Non-opiate only</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>-</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
    </tr>
    <tr>
      <td>Non-opiate and Alcohol</td>
      <td>8</td>
      <td>8</td>
      <td>8</td>
      <td>-</td>
      <td>6</td>
      <td>6</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
      <td>*</td>
    </tr>
    <tr>
      <td>Alcohol only</td>
      <td>12</td>
      <td>11</td>
      <td>13</td>
      <td>-</td>
      <td>15</td>
      <td>17</td>
      <td>21</td>
      <td>20</td>
      <td>21</td>
      <td>23</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
      <td>24</td>
    </tr>

  </tbody>
</table>

【讨论】：

我认为您没有完全阅读这个问题，他试图用“-”替换列中的任何整数，当且仅当该列还包含“*”时 - 至少这就是问题对我的解读。我同意 contains 方法，以便选择要操作的 columnIndex。
不是我想要替换的是该列中存在 * 的列中的整数值
试试第二个，@CryoFusion87——我认为它可能更符合您的要求。