Find td with specific title and get one of its attributes - javascript

I have 2 tables on my page, #seats and #wings.
Now I have to check which td inside table#seats contains a special title, then check what the value of its attr "seq" is, and finally add a class to the corresponding td intable#wings.
<table id="seats">
<tr>
<td title="" seq="1">Info</td>
<td title="Exit Row Seat" seq="2">Info</td>
<td title="" seq="3">Info</td>
</tr>
</table>
My Code so far:
$("table#seats tr td[title*='Exit Row Seat']").each(function () {
var count = $(this).attr("seq");
$("table#wings tr td:nth-child(" + count + ")").addClass('exitRow');
});
My Problem is, that I get all of the td's back, not only those with the title tag I am looking for. What do I do wrong?

Then you need to iterate all td and then read the attribute:
$("table#seats tr td").each(function () {
if($(this).attr('title') == "Exit Row Seat") {
var count = $(this).attr("seq");
$(this).addClass('exitRow');
}
});

My solution at the end:
for (var i = 0; i < allSeatTables.length; i++) {
$("td[title*='Exit']", allSeatTables[i]).each(function () {
var count = $(this).attr("seq");
$(("td:eq(" + count + ")"), allWingRow[i]).addClass("exitRow");
});
}

Related

Click on row in table to get info from child element

I have a table generated with data from an array (the array contains more info than what is displayed in the table). I want to click on a row to see all info from the element.
Earlier done it like this:
let rows = document.getElementsByTagName("tr");
for (let row of rows) {
row.onclick = function rowClicked(evt) {
selected = myArray[evt.target.parentElement.rowIndex];
//code (not relevant)
}
But since I added a search feature myArray[1] is not necessarily equal to row number 1 and this method doesn't work.
Is it another way to find the element in the array from clicking on a random row?
The table is generated like this:
function drawTable(data) {
let table = document.getElementById("table");
table.innerHTML = "";
let tableHead = document.createElement("thead");
let colHeads = ["Names"];
for (let header of colHeads) {
let cell = document.createElement("th")
cell.innerHTML = header;
tableHead.appendChild(cell);
}
table.appendChild(tableHead)
for (var i = 0; i < data.length; i++){
let row = document.createElement("tr");
let name = document.createElement("td");
name.innerHTML = data[i].name.first + "&nbsp" + data[i].name.last;
row.appendChild(name);
table.appendChild(row);
}
}
Any help is greatly appreciated!
You need some way to map a table row to its relevant entry in myArray which isn't dependent on the position of the row in the table. Data attributes wouldn't be affected.
Create a data-index attribute on each table row. Then, when it's clicked use the value of the data-index attribute to access the relevant myArray entry.
A simple version of what you have in mind. The visible line is bound with a click event. As soon as it is triggered, it gets the ref-id from the clicked element and toggles the reference column.
const clickables = document.querySelectorAll('.clickable');
console.log(clickables)
clickables.forEach(tr => {
tr.addEventListener('click', (e) => {
const ref = e.target.parentElement.getAttribute('data-ref');
const row = document.querySelector('#' + ref);
row.classList.toggle('hide');
});
});
td {
text-align: center;
padding: 20px;
}
.hide {
display: none;
}
.clickable {
cursor: pointer;
}
.clickable:hover {
background: #ccc;
}
<table border="1">
<tr class="clickable" data-ref="a">
<td>1</td>
<td>2</td>
</tr>
<tr id="a" class="hide">
<td>a1</td>
<td>b2</td>
</tr>
<tr class="clickable" data-ref="b">
<td>3</td>
<td>4</td>
</tr>
<tr id="b" class="hide">
<td>a3</td>
<td>a4</td>
</tr>
</table>

How to add condition and change the color of table row

I have a javascript which will read the value from the JSON and creates a table dynamically in the HTML page.
<div style="width:700px;padding:20px;S">
<h1 style="text-align:center"><i style="color:#ccc">ALM Server Availability</i></h1>
<table id="records_table" class="table">
<tr>
<th>Server Name</th>
<th>Availability %</th>
</tr>
</table>
</div>
JQUERY :
function availshow(series) {
// 1. remove all existing rows
$("tr:has(td)").remove();
$.each(series.data.hostgroup.hosts, function (index, test) {
$('<tr>').append(
$('<td>').text(test.name),
$('<td>').text(parseInt((test.time_up/86400)*100)),
).appendTo('#records_table');
});
}
Now i need to check the condition if value of (test.time_up/86400)*100) < 100 , then i need to make that particular row into red color. How can I achieve it.
You can do this, looping through each tr then looking for 2nd td value
$('#records_table tr').each(function() {
var $td = $(this).find('td:eq(1)');
var value = $td.text();
if (parseInt(value) < 100) {
$td.css('background-color', 'red');
}
});
Your JQuery fucntion should be something like this:
var i=0
function availshow(series) {
// 1. remove all existing rows
$("tr:has(td)").remove();
$.each(series.data.hostgroup.hosts, function (index, test) {
i=(test.time_up/86400)*100);
$("<tr"+(i < 100 ? "class:'redBlock'": "")+">").append(
$('<td>').text(test.name),
$('<td>').text(parseInt((test.time_up/86400)*100)),
).appendTo('#records_table');
});
}
And then create that said class in .css file with all the style you want:
.redBlock{
background-color:red;
}
Hope I could help.
Happy Coding :)

Get text from closest span using jQuery

I'm looking to retrieve the text inside a HTML table that is rendered via a webgrid. The text that I want is located inside a div with the class productID. My starting reference point is in the same row but the last td with the class span2. I'm trying to use jQuery's closest() method however I'm not getting any value returned.
Please see below for a section of the rendered HTML and my jQuery function:
HTML:
<tr>
<td class="span1"><div class="productID">1</div></td>
<td class="span2">Listing</td>
<td class="span2">Full Districtution</td>
<td class="span2">$1,350.00</td>
<td class="span2">2016-01-01</td>
<td class="span2"><div title="This is my brand new title!" data-original-title="" class="priceToolTip">2016-04-30</div></td>
<td>Select</td>
</tr>
jQuery:
$(".priceToolTip").mouseover(function () {
var row = $(this).closest("span1").find(".productID").parent().find(".productID").text();
console.log("Closest row is: " + row);
});
The .closest() method looks for a match in the ancestors. So you can use it to grab the tr then look for .productID like so:
var productID = $(this).closest('tr').find('.productID').text();
Or:
var productID = $(this).parent().find('.productID').text();
Or:
var productID = $(this).siblings('.span1').find('.productID').text();
.span1 is not the closest element of .priceToolTip. Use closest("tr").find(".span1 .productID") like following.
$(".priceToolTip").mouseover(function () {
var row = $(this).closest("tr").find(".span1 .productID").text();
console.log("Closest row is: " + row);
});

javascript - loop through a table and check the value

Background Information
I have two tables, one that is a list of available users, called "users" and the other one called "selected_users". When a row from the users table is clicked on, the app add / removes record from the selected_users table
<table id=users>
<tr class="odd" role="row" id="row_89"><td>89</td><td>John Doe</td><td>23819</td><td>mm2#yahoo.com</td></tr>
<tr class="even" role="row" id="row_90"><td>90</td><td>John Doe</td><td>23819</td><td>36338</td></tr>
<tr class="odd" role="row" id="row_91"><td>91</td><td>Jane Doe</td><td>23820</td><td>jane#yahoo.com</td></tr>
<tr class="even" role="row" id="row_92"><td>92</td><td>Jane Doe</td><td>23820</td><td>28519</td></tr>
<tr class="odd" role="row" id="row_93"><td>93</td><td>Jim Bob</td><td>23801</td><td>jbob#yahoo.com</td></tr>
</table>
<table id=selected_users class="table table-condensed table-bordered" width="80%">
<tr class="info"><td colspan="4"><b>Selected Users:</b></td></tr>
</table>
Question
I need to change the existing logic so that when a row in the available users list is selected, all other rows in the available users table that has a matching "pid" (which is the 3rd column) should be added to the selected_users table.
This is the code that is triggered when someone clicks on the available users table:
$('#users tbody').on('click', 'tr', function () {
var id = this.id;
var tr;
tr=$('<tr/>');
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id ); //select/highlight in list of available users.
// Find td's inside this tr and add to selected_users table
var tds = $(this).find('td');
tr.append("<td>" + tds.eq(0).text() + "</td>");
tr.append("<td>" + tds.eq(1).text() + "</td>");
tr.append("<td>" + tds.eq(2).text() + "</td>");
tr.append("<td>" + tds.eq(3).text() + "</td>");
tr. attr('id', id.substring(4));
$('#selected_users').append(tr);
//loop through the avail users table and select all records with the same p number.
$("users td").each(function(i,o){
// new code goes here
}
} else {
selected.splice( index, 1 ); //deselect from list of avail users
//remove matching record from selected_users table.
var record_id = id.substring(4);
var rowtodelete = document.getElementById(record_id);
rowtodelete.parentNode.removeChild(rowtodelete);
}
$(this).toggleClass('selected');
} );
} );
What I have so far
I'm thinking of adding code like this (pseudo code) in the section with the comment "new code goes here"
//loop through the avail users table and select all records with the same pager number.
$("users tr").each(function(){
$(this).find('td ....
});
I'm not sure how to do a find to see if the third column matches what I have in tds.eq(2).text()
Any suggestions would be appreciated
EDIT 1
This is what I have so far:
//2015.06.11 - find and add all other rows with matching p number
var thisTR = $(this);
console.log(thisTR);
//select all siblings with same value in third column
thisTR.siblings().filter(function() {
console.log($('td',this).eq(2).text() );
//console.log($('td', thisTR).eq(2).text());
if ($('td',this).eq(2).text() == $('td', thisTR).eq(2).text() ) {
console.log("i found a match");
console.log("what is the row for: " + $('td',this).eq(2).text());
};
});
I just need a way identify the row where the matching td was found, and then do something similar to what I'm already doing to add a row to selected_users:
var tr;
tr = "";
... find the row and then...
tr.append("" + tds.eq(0).text() + "");
tr.append("" + tds.eq(1).text() + "");
tr.append("" + tds.eq(2).text() + "");
tr.append("" + tds.eq(3).text() + "");
tr. attr('id', id.substring(4));
$('#selected_users').append(tr);
Here is what you can use - .filter( function )
//save a reference of the current row
var thisTR = $(this);
//select all siblings with same value in third row
thisTR.siblings().filter(function() {
return $('td',this).eq(2).text() == $('td', thisTR).eq(2).text();
})
//Iterate through them and do what needs to be done.
.each(function() {
//do something
//here 'this' refers to tr (matched row)
//$('td', this) should give you all the tds in 'this' row
});
My suggestion is to add the user ID to the elements using a data- custom attribute so you can easily access them with a selector.
For example, notice the data-uid attribute below:
<tr class="odd" role="row" id="row_89" data-uid="23819"><td>89</td><td>John Doe</td><td>23819</td><td>mm2#yahoo.com</td></tr>
With that in place, grabbing all the relevant rows is easy:
rows = $('#users tr[data-uid=' + uid + ']');
// ...

Group summary hiding and changing the text

loadComplete: function(data) {
$("tr.jqgrow:odd").addClass('myAltRowClass');
var i, groups = $(this).jqGrid("getGridParam", "groupingView").groups,
l = groups.length,
idSelectorPrefix = "#" + this.id + "ghead_2_";
for (i = 0; i < l; i++) {
if (groups[i].cnt === 1) {
$(idSelectorPrefix + i).hide();
}
}
//var gd=jQuery("#master")[0];
//gd.grid.footers
// alert("YES");
//});
//var element = $('#master>tbody>tr>td>div');
//element.each(function (i) {
// alert(i);
// $(this).closest('div').find(".RCSummaryFooter1").text("check");
//});
},
/*-----------this is from jqgird---- */
tr class="ui-widget-content jqfoot ui-row-ltr" role="row" jqfootlevel="1">
<tr id="masterghead_1_3" class="ui-widget-content jqgroup ui-row-ltr masterghead_1" role="row">
<tr id="masterghead_2_4" class="ui-widget-content jqgroup ui-row-ltr masterghead_2" role="row" style="display: none;">
<tr class="ui-widget-content jqfoot ui-row-ltr" role="row" jqfootlevel="2">
<td aria-describedby="master_HD" style="">
<div class="RCSummaryFooter1">Total </div>
</td>
Dear sir,
I am hiding the second level group text if only one record existed. this is from the ID (masterghead_2_4) I need to hide the summary as well. How could I access the tr since there is no Id for this tr (jqfootlevel="2") I have three groupings. This is the second level which I need to hide. I need to change the text of the summary as well. At the moment it is displaying word "Total" for all three summary levels. I need to change the text as 'Accounts Total', Activity total and Cost/Rvnu Total respectively. Thanks in Advance.
Please understand it is because of this site only I was managed to do all these work I have done so far. I am a Informix guy and new to this subject. If any one have ideas please share it
I managed solve the issue. But if some one has better way of doing please let me know.
The first issue was to hide the group headings and summary totals if the count ==1.
I need to hide two groups if in the event count ==1
loadComplete: function() {
/* --Hiding cost/revenue and Activity summary Values ---*/
$('tbody tr').each(function(n,opts) {
if(opts.getAttribute('jqfootlevel')=='2' && opts.cells[2].innerText ==1){
opts.style.display='none';
}
if(opts.getAttribute('jqfootlevel')=='1' && opts.cells[2].innerText ==1){
opts.style.display='none';
}
});
jqfootlevel is one of the attributes representing summary value tr (no id is available in this tr)
The following code segment I copied from Mr. Oleg's answer. This is to hide the Group header. In this case I am hiding only one Group header. (group 2- Cost/Rvnue Group)
/* --This is hiding Cost/Revenue Group header if total =1 --*/
var i, groups = $(this).jqGrid("getGridParam", "groupingView").groups,
l = groups.length,
idSelectorPrefix = "#" + this.id + "ghead_2_";
for (i = 0; i < l; i++) {
if (groups[i].cnt === 1) {
$(idSelectorPrefix + i).hide();
}
}
Following code will change the Total word as given below. So that it will display as
Cst/Rvnu Total
Activity Total
Accounts Total
for(var i=0;i<3;i++){
var element = $('tr[jqfootlevel='+i+']');
switch(i){
case 0:
var txt="Accounts Total";
break;
case 1:
var txt="Activity Total";
break;
case 2:
var txt="Cst/Rvnu Total";
break;
}
element.each(function (n,opts) {
opts.cells[0].innerHTML=txt;
opts.cells[0].style.color='tomato';
if(i<2){
opts.cells[2].innerHTML="";
}
});

Categories