Question

我试图通过string获取搜索元素的下一个元素中的文本。让我按代码解释

＆＃13;

<table id="myTable">
<tbody>
 <tr>
  <th>Name</th>
   <td>foo</td>
  </tr>
 <tr>
    <th>age</th>
   <td>20</td>
  </tr>
 </tbody>
</table>

＆＃13;

如果＆＃34; age＆＃34;我必须搜索字符串。存在。然后返回20作为其值。我试图通过包含搜索字符串：但无法访问值

Answer 1

您可以使用jQuery next()和contains selector来实现您的目标。

＆＃13;

$(document).ready(function() {
  console.log($("th:contains(age)").next().html());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <tbody>
    <tr>
      <th>Name</th>
      <td>foo</td>
    </tr>
    <tr>
      <th>age</th>
      <td>20</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

此解决方案将遍历tr个子元素的所有元素，并检查其文本是否与搜索相同。如果它相等，则将下一个元素分配给nextElem。

＆＃13;

let search = "age";
let nextElem;

$('#myTable tr').children().each(function() {
  if ($(this).text() === search)
    nextElem = $(this).next();
});

console.log(nextElem.text())

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tbody>
 <tr>
  <th>Name</th>
   <td>foo</td>
  </tr>
 <tr>
    <th>age</th>
   <td>20</td>
  </tr>
 </tbody>
</table>

＆＃13;

Answer 3

您已经设置了表格来显示名称 - 值对，其中每个名称都包含在<th>...</th>中，其对应的值包含在<td>...</td>中。

因此，一种方法是直接使用文档对象模型导航：

getElementsByTagName('th')
getElementsByTagName('td')

＆＃13;

var table = document.getElementsByTagName('table')[0];
var button = document.getElementsByTagName('button')[0];
var summary = document.getElementsByClassName('summary')[0];
var searchedFor = summary.getElementsByTagName('p')[0];
var correspondingResult = summary.getElementsByTagName('p')[1];


function displayResult() {
var returnValue = '';
var searchString = document.getElementsByTagName('input')[0].value;
var lowerCaseSearchString = searchString.toLowerCase();
var tableRows = document.getElementsByTagName('tr');

for (var i = 0; i < tableRows.length; i++) {
    var name = tableRows[i].getElementsByTagName('th')[0].textContent.toLowerCase();

    if (name === lowerCaseSearchString) {
        returnValue = tableRows[i].getElementsByTagName('td')[0].textContent;
    }

    if (returnValue === '') {
        returnValue = 'No Matches';
    }
}

searchedFor.textContent = 'You searched for... ' + '"' + searchString + '"';
correspondingResult.textContent = 'The corresponding result is... ' + '"' + returnValue + '"';
}

button.addEventListener('click',displayResult,false);

＆＃13;

table, .search-panel {
display: inline-block;
vertical-align: top;
margin-right: 24px;
}

table {
border: 2px solid rgb(127,127,127);
}

th, td {
padding: 12px;
}

th {
text-align: left;
background-color: rgb(191,191,191);
}

th::after {
content:':';
}

.search-results p span {
font-weight:bold;
}

＆＃13;

<table>
<tbody>
<tr>
<th>Name</th>
<td>Foo</td>
</tr>

<tr>
<th>Age</th>
<td>20</td>
</tr>

</tbody>
</table>

<div class="search-panel">
<form>
<input type="text" placeholder="Enter your string here..." value="" />
<button type="button">Search for String</button>
</form>

<div class="summary">
<p>You searched for... </p>
<p>The corresponding result is... </p>
</div>
</div>

＆＃13;

如果按特定字符串搜索元素，如何获得nextsibling的值？

3 个答案: