Develop Reference

How to get value of nextsibling if element search by specific string?

I am trying to get the text which is in the next element of searched element by string.Let me explain by code
<table id="myTable">
<tbody>
<tr>
<th>Name</th>
<td>foo</td>
</tr>
<tr>
<th>age</th>
<td>20</td>
</tr>
</tbody>
</table>
I have to search string if "age" exist. then return 20 as its value.
I tried to search string by contains: But unable to access value

You could use jQuery next() and contains selector to achieve what you need.
$(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>

This solution will go through all the elements that are children of trs and check to see that their text is equal to the search. If it is equal, it assigns the next element to 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>

You've already set up the table to display name-value pairs, where each name is contained within <th>...</th> and its corresponding value is contained within <td>...</td>.
So one approach to this is straightforward Document Object Model navigation, using:
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>

How to combine search in table by two input text fields?

My table looks like this:
<table>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
The searching javascript as follows:
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
Look at this example to understand my problem better:
http://jsfiddle.net/7BUmG/4398/
I filter table rows with the first input field. Then, when I use the second input field, results of first search are not included. How can I fix it?

When you are applying your filter, you are first showing all the rows, negating any previous filtering on them. This is one solution to that problem... it stores the filters and applies both on either input's keyup event, based on your fiddle.
var $rows = $('#table tr');
var filters = { col1: '', col2: ''};
$('#search1').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
filters.col1 = val;
applyFilters();
});
$('#search2').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
filters.col2 = val;
applyFilters();
});
function applyFilters() {
$rows.show();
$rows.filter(function() {
var text = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(filters.col1);
}).hide();
$rows.filter(function() {
var text = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(filters.col2);
}).hide();
};

Your current logic is a little confused. You are re-showing and re-hiding the filtered items for every search field. What you really want is to filter it all in one go like so:
var $rows = $('#table tr');
$('#search1, #search2').on('input', function() {
var val1 = $.trim($('#search1').val()).replace(/ +/g, ' ').toLowerCase();
var val2 = $.trim($('#search2').val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text1 = $(this).find('td:nth-child(1)').text().replace(/\s+/g, ' ').toLowerCase();
var text2 = $(this).find('td:nth-child(2)').text().replace(/\s+/g, ' ').toLowerCase();
return !~text1.indexOf(val1) || !~text2.indexOf(val2);
}).hide();
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 98px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search1" placeholder="Type to search">
<input type="text" id="search2" placeholder="Type to search">
<table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
That's of course assuming non-dynamic number of columns and filter fields. If that's what you're after, you need to check the index rather than hard coding td:nth-child(1) and td:nth-child(2)

You can accomplish it using each(). This code will collect the value of each input for each keyup(), then if this value exists in the corresponding td by using indexOf(), it will show the tr which contains this td and hide others, otherwise it will show all tr's
http://jsfiddle.net/7BUmG/4399/
var $rows = $('#table tr'),
searchVal1,
searchVal2,
td1,
td2;
$('input').keyup(function () {
searchVal1 = $('#search1').val(),
searchVal2 = $('#search2').val();
$rows.each(function (index, tr) {
td1 = $(tr).find('td:nth-of-type(1)').text().toLowerCase(),
td2 = $(tr).find('td:nth-of-type(2)').text().toLowerCase();
if ( (td1.indexOf(searchVal1) != -1) && (td2.indexOf(searchVal2) != -1) ) {
$(this).show();
} else {
$(this).hide();
}
});
if ((searchVal1 === '') && (searchVal2 === '')) {
$rows.show();
}
});
body {padding: 20px;}
input {margin-bottom: 5px; padding: 2px 3px; width: 98px;}
td {padding: 4px; border: 1px #CCC solid; width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search1" placeholder="Type to search">
<input type="text" id="search2" placeholder="Type to search">
<table id="table">
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>

How to make a HTML table cell into a editable text box

Basically, I want the the user to click the table and edit the text.
This is the Js Fiddle I followed:
http://jsfiddle.net/ddd3nick/ExA3j/22/
Below you will be able see the code I have put together. I have followed a JS fiddle and thought of using this in my page.
When I double click the cell nothing happens, I am not sure why is not working.
Please help to find what's missing!
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<script type="text/javascript">
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
$(this).find('input').dblclick(function(e){
e.stopPropagation();
});
});
});
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<table class="editableTable">
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Shahid</td>
<td>shahid#ssiddique.info</td>
<td>012-234-2432</td>
</tr>
</tbody>
</table>
<a href='http://ssiddique.info'> ssiddique </a>
</body>
</html>

First include the jQuery library
Than put your script
You might want to take a look at contenteditable Elements
which would than look pretty much like this:
$(function() {
var $td = $("td");
$td.on({
"keypress" : function(e) {
if (e.which !== 13) { // On Return key - "save" cell
e.preventDefault();
$(this).prop("contenteditable", false);
}
},
"dblclick" : function() {
$td.not(this).prop("contenteditable", false);
$(this).prop("contenteditable", true);
}
});
});
td, th { padding:5px; border: 1px solid #ddd; }
td[contenteditable=true] { outline: 2px solid #0af; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<p><b>Double-click</b> on a table cell to edit</p>r
<table>
<thead>
<tr>
<th>Code</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>000</td>
<td>Roko</td>
<td>roko#example.com</td>
<td>021-321-4321</td>
</tr>
<tr>
<td>001</td>
<td>Shahid</td>
<td>shahid#example.com</td>
<td>012-123-1234</td>
</tr>
</tbody>
</table>

get the value of any clicked td jquery

im traying to get the value of any clicked td and show this in a alert() window with jquery or javascript. I was trayin alote of code around the internet "googling" but anyone can do this but anyways i going to posted here...
$("table tbody").click(function() {
alert($(this).find('td.value').text());
});
$(document).ready(function() {
$('table tbody').find('tr').click(function() {
alert("row find");
alert('You clicked row ' + ($(this).index() + 1));
});
});
$(document).ready(function() {
$('table tbody').click(function() {
var i = $(this).index();
alert('Has clickado sobre el elemento número: ' + i);
});
});
$("table tbody").live('click', function() {
if $(this).index() === 1) {
alert('The third row was clicked'); // Yes the third as it's zero base index
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>

Why not attach the click event directly to the td? You also need to make sure you're including jQuery...
$( "td" ).click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>
</body>

You need to include jQuery library to start working with it. Then just bind a click event to your td and you should see the alert pop up.
<head>
<title></title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js" type="text/javascript">
// Your code comes here
Also next time if something does not work, the first thing that you are supposed to so id open the console and check if you see any errors and act upon them.
Using console.log instead of alert should be the way to go as alert blocks the UI thread completely.
$("td").click(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<td>id</td>
<td>Nombre</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>miguel</td>
</tr>
</tbody>
</table>

loop to each td and get its text and then replace each td's content with an input box

When clicked on a table's tr, I want to loop through each td within that clicked tr and get it text, then replace each td's content with an input checkbox with a value of each td's text within that clicked table's tr.
My html:
<table>
<thead>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</thead>
<tbody>
<tr data-id="1">
<td>Jason</td>
<td>USA</td>
<td>Not specified</td>
</tr>
<tr data-id="2">
<td>Micheal</td>
<td>USA</td>
<td>Not specified</td>
</tr>
<tr data-id="3">
<td>Jason</td>
<td>Thailand</td>
<td>222-222</td>
</tr>
</tbody>
my script
$("table tr").click(function(){
$("td", this).each(function(){
var this_text = $("this").text();
//I dont know what to do next here
});
});
To sharpen the details, when any of the table's tr is clicked, it will loop to each of its childrens (td) and get its text, replace each children's content (td's content) with an input checkbox that has a value of each children's text (td's text).

You can use:
$("table tr").click(function(){
$("td:not(:has(input))", this).html(function(i,html){
return "<input type='text' value='" + html + "'/>";
});
});
Working Demo

You can
$("table").on('click', 'tbody tr:not(.editable)', function() {
$(this).addClass('editable')
$("td", this).not(':has(input)').each(function() {
var $input = $('<input />', {
value: this.innerHTML.trim()
});
$(this).html($input)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
</thead>
<tbody>
<tr data-id="1">
<td>Jason</td>
<td>USA</td>
<td>Not specified</td>
</tr>
<tr data-id="2">
<td>Micheal</td>
<td>USA</td>
<td>Not specified</td>
</tr>
<tr data-id="3">
<td>Jason</td>
<td>Thailand</td>
<td>222-222</td>
</tr>
</tbody>
</table>

Just add this line
$(this).html('<input type="text" value="'+this_text+'"/>');
so it will be like this
$("table tr").click(function(){
$("td", this).each(function(){
var this_text = $(this).text();
$(this).html('<input type="text" value="'+this_text+'"/>');
});
});
Fiddle Link
By the way you have a error in your code in line
var this_text = $("this").text();
$("this") will be just $(this)
Update
IF you want to preserve the text value also in future click the you have to do a little more coding, like:
$("table tr").click(function(){
$("td", this).each(function(){
var inputFound=$(this).find('input');
if(inputFound.length == 0)
{
var this_text = $(this).text();
$(this).html('<input type="text" value="'+this_text+'"/>');
}
});
});
See this update