如何使用 javascript 在 <td> 中搜索字符串，然后添加到该 id

How with javascript search in <td> for string and then add to that id?

本文关键字：然后 字符串 id 添加 搜索 javascript 何使用 td      更新时间：2023-09-26

>我需要在表中查找字符串，但是表的内容是使用foreach未分配的ID生成的。我想找到包含文本<td>，然后我需要添加到该<td> id，然后使用它。有没有可能？

---几个小时后编辑 --
这要困难得多。我有头和寻找它！搜索这个   .我只需要找出它在 thead 中的位置（第 1、2、3、4 等），这样我就可以继续处理整个列。

示例代码与 ！！搜索这个  ：`

<thead>
  <tr class="listViewHeaders">
   <th width="5%">
    <input type="checkbox" id="listViewEntriesMainCheckBox">
   </th>
   <th nowrap="">
    <a href="javascript:void(0);" class="listViewHeaderValues" data-nextsortorderval="ASC" data-columnname="cf_835">!!SEARCH THIS&nbsp;&nbsp;</a>
   </th>
   <th nowrap="">
    <a href="javascript:void(0);" class="listViewHeaderValues" data-nextsortorderval="ASC" data-columnname="createdtime">Created Time&nbsp;&nbsp;</a>
   </th>
   <th nowrap="" colspan="2">
    <a href="javascript:void(0);" class="listViewHeaderValues" data-nextsortorderval="ASC" data-columnname="smownerid">Assigned To&nbsp;&nbsp;</a>
   </th>
  </tr>
</thead>

'

计算td元素的数量 document.querySelectorAll('td').length; 然后在每个td内循环并搜索 如果td等于您的string 将属性 ID 设置为此 td 元素

例：

var len = document.querySelectorAll('td').length;
for (var i=0; i < len; i++){
  if ( document.querySelectorAll('td')[i].innerHTML == "Eve"){
    document.querySelectorAll('td')[i].setAttribute('id', 'yourID')
  }
}
#yourID{
  color: red;
  font-weight: bold
}
<table>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

你说你的内容没有任何id，但你说你必须将字符串添加到id中。

你说的是吗？

对于信息，即使在 foreach 中，您也可以使用简单的计数器为您的内容分配一个 id：

int i = 0;
foreach(foo in bar)
{
    <td id=i>some content</td>
    i++;
}

这要困难得多。我有头和寻找它！搜索这个   .我只需要找出它在 thead 中的位置（第 1、2、3、4 等），这样我就可以继续处理整个列。

示例代码与 ！！搜索这个  ：`

<thead>
  <tr class="listViewHeaders">
   <th width="5%">
    <input type="checkbox" id="listViewEntriesMainCheckBox">
   </th>
   <th nowrap="">
    <a href="javascript:void(0);" class="listViewHeaderValues" data-nextsortorderval="ASC" data-columnname="cf_835">!!SEARCH THIS&nbsp;&nbsp;</a>
   </th>
   <th nowrap="">
    <a href="javascript:void(0);" class="listViewHeaderValues" data-nextsortorderval="ASC" data-columnname="createdtime">Created Time&nbsp;&nbsp;</a>
   </th>
   <th nowrap="" colspan="2">
    <a href="javascript:void(0);" class="listViewHeaderValues" data-nextsortorderval="ASC" data-columnname="smownerid">Assigned To&nbsp;&nbsp;</a>
   </th>
  </tr>
</thead>

'

最后我解决了它： 

<script type="text/javascript">
        jQuery( document ).ready(function( $ ) {
          var orderColumns = $('a').filter(':contains(SEARCHED STRING)').parent().index();
        });
        </script>
您可以使用

XPATH 评估您的document并在之后处理该元素。

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
var element = getElementByXpath("//td[contains(text(),'Eve')]");
element.setAttribute('id', 'someId-' + Math.floor((Math.random() * 100) + 1))
console.log(element);
<table>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

相关文章：