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

Question

我想獲得它是由string.Let搜索元素的下一個元素中的文本我通過代碼

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

我有，如果「時代」存在搜索字符串解釋。然後返回20作爲它的值。 我試圖通過包含搜索字符串：但無法訪問值

Answer 1

你可以使用jQuery next()和contains selector達到你所需要的。

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

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

Answer 2

該解決方案將遍歷所有tr的子項的元素，並檢查其文本是否與搜索相同。如果相等，則將下一個元素分配給nextElem。

let search = "age"; 
 
let nextElem; 
 

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

 
console.log(nextElem.text())

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

Answer 3

你已經設置爲顯示名稱 - 值對，其中每個名字被包含在<th>...</th>及其相應的值是包含在<td>...</td>表。

所以一個方法，這是簡單的文檔對象模型導航，使用：

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

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

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

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