Next <a> tag in table - javascript

I have a table that look like that :
<table>
<tbody>
<tr>
<td>
<a id="firstTAG" class="jp-play-me" data="foo"></a>
</td>
</tr>
<tr>
<td>
<a id="secondTAG" class="jp-play-me" data="bar"></a>
</td>
</tr>
<tr>
<td>
<a id="thirdTAG" class="jp-play-me" data="foobar"></a>
</td>
</tr>
</tbody>
</table>
And a javascript/jQuery function :
function getnextmedia(current) {
var res = current.split("/");
rowId = "#" + res[5];
$(".jp-play-me").each(function() {
if (this.id == rowId) {
alert(this.data);
alert($(this).next(".jp-play-me").attr("data"));
}
});
}
rowid is an id Im looking for in the table. I use the class jp-play-me to find all <a> tags and then compare id to get the good <a> tag. That works fine.
The next step is to get the following <a> tag in the table so the function can read the data attribute.
For exemple, if rowId is equal to secondTAG then I need to get the value foobar, which is the value of the following data <a> tag attribute.
I tried to use the next() method but I guess I do it the wrong way.
Let me know if you need more informations.

It's not working because the .next() method returns the immediately following sibling element. Since the anchor elements are not siblings, nothing is returned.
In order to get the anchor element in the next tr element, you would need to select the closest tr, then find the anchor element in the next tr:
$(this).closest('tr').next().find('.jp-play-me').attr("data");
$(".jp-play-me").each(function() {
if (this.id == rowId) {
// Next <a>
$(this).closest('tr').next().find('.jp-play-me').attr("data");
}
});
References:
.next()
.closest()
.find()

Related

Pass php variable through JavaScript to another php page

I want to pass the id to the next page on clicking the entire row.
I tried to do it myself but I wasn't able to do so .
my code is below :
$( "#tablerow" ).click(function() {
var jobvalue=$("#jobid").val();
alert(jobvalue);
window.location.href = "jobsview.php?id=" + jobvalue;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr id="tablerow">
<td><?=$srno?></td>
<td id="jobid"><?=$row['ID']?></td>
</tr>
</tbody>
</table>
val() method works for form elements like input, select etc.
Use text() method,
var jobvalue = $("#jobid").text();
Update
An HTML can have only one ID throughout the document. To enable click event for multiple elements and pass the one that is clicked onto another page, change ID attribute to class.
<table>
<tbody>
<tr class="tablerow" >
<td><?=$srno?></td>
<td class="jobid"><?=$row['ID']?></td>
</tr>
</tbody>
</table>
Then you can get the once clicked in JS as follows,
$( ".tablerow" ).click(function() {
/** $(this) will refer to current tablerow clicked
* .find(".jobid") will find element with class `jobid`
* inside currently clicked tablerow
*/
var jobvalue = $(this).find(".jobid").text();
alert(jobvalue);
window.location.href = "jobsview.php?id=" + jobvalue;
});

selecting td from string

I have the following Html stirng stored in a JS variable:
<td>
<input onclick="Clicked(this);" type="radio" name="mmBox" id="mmBox">
</td>
<td>First Cell</td>
<td>2nd TD</td>
<td>3rd TD</td>
<td>4th TD</td>
<td>5th TD</td>
<td></td>
I depending on need I need to select 2nd, 3rd and 4th <td>
I have tried the following but it do not return anything:
console.log("6 " + $(selectedRow).wrap("<tr></tr>").children("td:nth-child(2)").html());
or
console.log("6 " + $(selectedRow).find("td:eq(2)").text());
Even with .find and .select methods as well but it do not return anything.
Please help me, I want to query <td> and value inside it
Assuming selectedRow variable contains the html string that you have posted, you should use the .filter method instead of the .find:
$(selectedRow).filter(":eq(2)").text();
Or by using the .eq method:
$(selectedRow).eq(1).text();
Note that .eq is zero-based so 1 selects the second element in the set.
Do it the other way around....create a row element first and set the cells in that row then you can use find on the row object
var $row = $('<tr>').html(selectedRow);
console.log("6 " + $row.find("td:eq(2)").text());
The wrap() method wrap each td with separate tr element, I think you need a single tr which wraps all the element for that use wrapAll() method. Although use filter() method since you need filter out td from the jQuery element and not from its children. Actually wrapping with tr is completely unnecessary if you just want to fetch the content.
var selectedRow = '<td><input onclick="Clicked(this);" type="radio" name="mmBox" id="mmBox"></td><td>First Cell</td><td>2nd TD</td><td>3rd TD</td><td>4th TD</td><td>5th TD</td><td></td>';
console.log("6 " + $(selectedRow).wrapAll("<tr></tr>").filter("td:nth-child(2)").html());
// by removing code which wraps the elements
console.log("6 " + $(selectedRow).filter("td:nth-child(2)").html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How to compare several td.text() in tr using jQuery

<table>
<tr id="tr1">
<td id="td1"> test1 </td>
<td id="td2"> test2 </td>
<td id="td3"> test1 </td>
<td id="td4"> test3 </td>
</tr>
</table>
Here I have a table with a tr in it and 4 td's.
Now, my question is, how can I compare the td.text() with the other one?
For example:
a loop that takes the text of first td and then compare it with other td's.
If it is the same, then give that td a class.
HERE: td id="td1" should get a class
BUT:
When I'm at the 3e td, the 3e td should get a class.
This code should work for you:
var tds;
$('tr').each(function(i, item){
tds = $(this).find('td');
tds.each(function(j, elem1){
tds.each(function(k, elem2){
if($(elem1)[0] != $(elem2)[0] && $(elem1).text() == $(elem2).text()){
$(elem1).addClass('cl');
}
});
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/cqa6m6va/1/
You can use this code:
function setClasses(word) {
var tds = $("tr td");
for(var i = 0; i < tds.length; i++) {
if(tds.eq(i).text() === word) {
tds.eq(i).addClass('red');
}
}
}
setClasses("test1");
jQuery selectors will be your friend here. :)
var $container = $("#tr")
$container.children().each(function() {
if (!($(this).hasClass("td")) {
var sTextVal = $(this).text();
var $currTextGroup = $container.children(":contains('" + sTextVal + "')");
if ($currTextGroup.length > 1) {
$currTextGroup.addClass("td");
}
}
});
I'll explain the logic, and then touch on one issue to be aware of . . .
Basically, this code:
Collects all of the the children of the <tr> and loops through them one at a time
If the current child does not already have a class of "td" (if it already has a "td" class, then this text has already been checked for duplicates), it retrieves the text from inside the element and searches for all of the children of the <tr> that contain that same text value
If more than one of the children in the <tr> contain that text, all of those children are given the class of "td"
The one potential issue that this solution could run into is if the text in the current element is present as part of the text in one of its siblings. For example, if the text in one sibling is "the", and it has some siblings that have text values of "then" and "there" and "the end", they will be found by :contains.
If your text values are sufficiently "patterned" (as they are in your example), though, this should not be an issue. If it is an issue, there is a more complex way to do that "common text" selection, but I won't bother with that, unless it is necessary.
If I understand correctly, you want to select the first 'td' in a 'tr' and compare it against the other 'td' in your table. Please try the below code and let me know if it works for you.
HTML (provided by OP)
<table>
<tr id="tr1">
<td id="td1"> test1 </td>
<td id="td2"> test2 </td>
<td id="td3"> test1 </td>
<td id="td4"> test3 </td>
</tr>
</table>
CSS
.color--red { color: red; }
jQuery
$(document).ready(function(){
var first = $("#tr1 :first-child").html();
$('#tr1 :not(:first-child)').each(function() {
if(first == $(this).html()){
$(this).addClass("color--red");
}
});
});
I tried to keep it as simple as possible. The variable first pertains to that first 'td' that you want to use for comparison. Note how the each function operates on 'all elements except the first child in the tr', which clearly will omit the first variable we declared initially. From there it's all about comparing using $(this).html() to grab the value of the currently selected element, against the value obtained from the first variable.
Once this succeeds, simply add a class of your choice. For simplicity's sake, I added my own color--red class to the mix, which should show red color text for the third 'td' element as you suggested in your question post. Enjoy! Let me know if you need anything further.

Jquery next() is not working

I have
<table class="prodtable">
<tr>
<td></td>
<td>
<input class="editok" value="2" />
</td>
<td>
<input name="prodnumber" value="1" />
<i></i>
</td>
</tr>
</table>
and this js
$('.prodtable').on('blur','.editok',function(){
var neuanzahl = $(this).val();
$(this).parent('td').text(neuanzahl);//<-- till here works fine
$(this).parent('td').next().find('input').val(neuanzahl);//<-- from here, failure
$(this).parent('td').next().find('i').addClass('icon-pencil');
});
the editok input was inserted dynamically, thats why i am setting the handler from parent table.
my problem is, on blur event, the value of the given input should be put in the next input which is inside the next td with name prodnumger and the <i> should get the class icon-pencil.
I am trying for 1 hour now, what a shame.. not a single success. what am I doing wrong here?
This line
$(this).parent('td').text(neuanzahl);
replaces everything in the TD, as that's what text() does, it overwrites everything, so on the next line when you do
$(this).parent('td').next().find('input') ...
there is no this, you just removed it with text()
Just chaining instead of using multiple lines will keep the reference
$('.prodtable').on('blur','.editok',function(){
var neuanzahl = this.value;
$(this).parent('td')
.text(neuanzahl)
.next('td')
.find('input')
.val(neuanzahl)
.next('i')
.addClass('icon-pencil');
});
FIDDLE
The minute you call $(this).parent('td').text(...), you've removed the input from its parent. So $(this).parent('td') in the following calls won't match anything.
Save that td at the start, and use it throughout:
$('.prodtable').on('blur','.editok',function(){
var neuanzahl = $(this).val();
var td = $(this).parent('td');
td.text(neuanzahl);
td.next().find('input').val(neuanzahl);
td.next().find('i').addClass('icon-pencil');
});
Example: http://codepen.io/paulroub/pen/xHwdi
Solution is to store reference of next div in a variable.
$('.prodtable').on('blur', '.editok', function () {
var td = $(this).parent('td');
var next = $(this).parent('td').next(); //Store reference of next div in a variable
var neuanzahl = $(this).val();
td.text(neuanzahl);
next.find('input').val(neuanzahl);
next.find('i').addClass('icon-pencil');
});
Problem with your code is that when $(this).parent('td').text(neuanzahl) reference to this is lost as you have replaced the content to td.
Your table opening tag is not spelled correctly that is likely why you are having difficulties.

How to fetch the dynamically created element by its ID in jQuery

Initially adding the element statically like below:
<td valign="top" id="description_div">
*<table class="des_box" id="comment_div">
<tr><td class="head" id=file_comments> The function comments </td></tr>
<tr><td class="comment" id="test_point_comment_info"></td></tr>
</table>*
</td>
Dynamically adding the element as below :
$("#description_div").append(
'<table class="des_box1" id=comment_div><tr><td class="head" id=file_comments> The function comments </td></tr><tr><td class="comment" id=test_point_comment_info_' + id + '></td></tr> </table>')
Now, when I try to fetch the element by its id (that is by "comment_div") ... I am not able to retrieve the dynamically created element. But able to fetch the static element by using $("#comment_div")
I am trying to do following on the element :
$("#comment_div").show();
tried .live() ....but was not able to fetch the dynamic element.
$("#comment_div").live().show();
check box code :
<li><input type="checkbox" name="comment" />Comment</li>
actual functions where am trying to fetch the element:
$("#checkbox_div input:checkbox").click(function() {
var division = "#" + $(this).attr('name') + "_div";
$(division).show();
}
function SetCheckboxes(checkbox_data) {
//SetCookie('pre_checkbox', "1111111111111111")
var checkbox_data = GetCookie('pre_checkbox');
if (checkbox_data == null) {
SetCookie('pre_checkbox', "1111111111111111")
checkbox_data = GetCookie('pre_checkbox');
}
checkbox_array = new Array("owner", "test_time", "bp", "single_use", "num_of_test", "pause", "clearall", "clearclass", "clearmax", "closeall", "qeinbat", "m_lint","geck","header","comment","feature");
for ( i = 0; i < checkbox_data.length; i++) {
var checkbox_name = checkbox_array[i];
var value = checkbox_data[i];
var division = "#" + checkbox_name + "_div";
if (checkbox_name=="geck" || checkbox_name=="header" || checkbox_name== "comment" || checkbox_name=="feature"){
console.log("entering_loop_as_expected")
if (value == "1") {
//alert("1");
$("#checkbox_div input[name='" + checkbox_name + "']").attr("checked", "checked");
$(division).show();
} else {
$(division).hide();
}
continue;
}
Please help me out on this.
.live() is what you wanted but it has been depreciated, you now need to use .on()
$(document).on("click", "#checkbox_div input:checkbox", function(){
//Your code here.
});
Using document for your selector with .on will allow you to bind events to dynamically created elements. This is the only way I've found to do it when the DOM elements don't exist prior to execution.
I do this in a dynamically created table that is sort-able and works great.
EDIT:
Here is an example. Click the button to add a div then click the div to get it's contents.
http://jsfiddle.net/FEzcC/1/
You missed the quotes, also ensure you try to access them before they are added to DOM, e.g they will not be available on DOM ready if they are added on some button click. I think you forgot to give value of id, I have made a live demo.
Live Demo
$("#checkbox_div input:checkbox").click(function() {
var division = "#" + $(this).attr('name') + "_div";
$(division).show();
});
id=1;
$("#description_div").append('<table class="des_box1" id="comment_div"><tr><td class="head" id="file_comments"> The function comments </td></tr><tr><td class="comment" id="test_point_comment_info_' + id + '"></td></tr> </table>');
Edit based on comments and fiddle being provided.
You have few problems with html in the demo
Your html starts with td instead of table
You do not enclose the ids with quotes
You are assigning same id to more then one element, instead assign a
common class and use that.
Live Demo, Problem here are not dynamic element but the wrong HTML / Script
Html
<table>
<tr>
<td valign="top" id="description_div">
<table class="des_box" id="comment_div1">
<tr>
<td class="head" id="file_comments">The function commentszz</td>
</tr>
<tr>
<td class="comment" id="test_point_comment_info"></td>
</tr>
</table>
</td>
</tr>
</table>
<div id="checkbox_div">
<input type="checkbox" name="des" />Comment
</div>
Javascript
$("#description_div").append(
'<table class="des_box" id="comment_div2"><tr><td class="head" id=file_comments> The function comments </td></tr><tr><td class="comment" id=test_point_comment_info_' + 'id' + '></td></tr> </table>');
$(document).on("click", "#checkbox_div input:checkbox", function () {
var division = "." + $(this).attr('name') + "_box";
$(division).show();
});
If you have to use same id for more than one element with is wrong you can use attribute selector. First correct the html by enclosing td within tr and table tag.
Live Demo
$(document).on("click", "#checkbox_div input:checkbox", function(){
var division = "[id=" + $(this).attr('name') + "_div]";
$(division).show();
});
What is id value in + id +, id is undefined in current context. I have put it in single quote and its working fine.
Update: You are using same id comment_div for static and dynamic content, id should be unique in DOM. Use class instead of id for multiple elements
Updated jsFiddle

Categories

Resources