I'm a noob to jquery. Stuck and would appreciate some help.
Currently building a tool to grab data from a particular page. The page looks like this:
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1">
<tbody> //This is data group 1
<tr id="parent0"> //Record 1
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
<tr id="parent0"> //Record 2
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
</tbody>
</table>
<table width="100%" border="0" align="center" cellpadding="3" cellspacing="1">
<tbody> //This is data group 2
<tr id="child0"> //Record 1
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
<tr id="child0"> //Record 2
<td align="left"> <---------- text1 here -------> </td>
<td align="left"> <---------- text2 here -------> </td>
<td align="left"> <---------- text3 here -------> </td>
</tr>
</tbody>
</table>
Below is a snippet of the jquery:
ancestor = $(this).closest("tr[id]");
matchedElement = $(this).first();
originalBgColor = $(matchedElement).css('background-color');
$(matchedElement).css('background-color', 'green');
$(matchedElement).bind('click.annotator', function(event) {
event.stopPropagation();
event.preventDefault();
self.port.emit('show',
[
document.location.toString(),
$(ancestor).attr("child0"),
$(matchedElement).text()
]
I'm trying to capture all data from just the <tr> blocks with id parent0, and child0.
In it's current working state, the tool captures all data within the two tables as text. Ideally I'd like to be able to capture all the <TR> blocks separately, put them in an array that I can then iterate over.
It looks like you are using ID elements where you should be using a class.
Instead of
<tr id="child0">
<tr id="parent0">
Do this
<tr class="child0">
<tr class="parent0">
Unlike ID, you can assign the same value to multiple elements with the class attribute.
Then you can select them all like this
$("tr.child0,tr.parent0").each(
function() {
//this will be fired for each matched element
$(this).doSomething();
}
)
$('tr[id="child0"]').each(function() {
//this will be fired for each matched element
$(this).doSomething();
}
);
this way you will get all tr whose id is child0
check this link for more reference http://api.jquery.com/category/selectors/
DO like that...
$('cite.fn:contains(blabla)').css('color', 'red');
Edit: though that will match "blablablabla" as well.
$('cite.fn').each(function () {
if ($(this).text() == 'blabla') {
$(this).css('color', 'red');
}
});
That should be more accurate.
Edit: Actually, I think this solution is more elegant:
$('cite.fn').filter(function () {
return $(this).text() == 'blabla';
}).css('color', 'red');;
Related
i have two tables
<table id='standings'>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>
<table id='matches'>
<tr id='match1'>
<td id='matchTeam1>Team1</TD>
<td class='score'> 22-31</td>
<td id='matchTeam3>Team3</td>
</tr>
</table>
My goal is to hover over the row with id 'match1' from the second table and have the rows with id 'tableTeam1' and 'tableTeam3' highlighted
1.)
how is this possible by js/css?
2.) How can it be done by using a php database request when
"Select tableTeam1,tableTeam2 from matches where id='match1'"
Thank you so much in advance
Try this:
$('#match1')
.mouseenter(function() {
$('#tableTeam1').addClass('highlighted');
})
.mouseleave(function() {
$('#tableTeam1').removeClass('highlighted');
})
You also need to add some CSS there, like this one:
.highlighted { background-color: red;}
I don't know your data structure but it should be something like that, I think:
...
<tr id="<?php echo $data['column_name']; ?>" <?php echo ($data['column_name'] === 'match1')? 'class="highlighted"' : ''; ?>>
...
Put your team numbers in a data attribute in rows of the matches then it is fairly simple to parse them to match the elements in the other table and toggle a class on them
$('#matches .match-row').hover(function() {
const teams = $(this).data('teams');
teams.forEach(num => $('#tableTeam' + num).toggleClass('active'))
})
tr.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='standings' border=1>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>
<table id='matches' border=1>
<tr class="match-row" data-teams="[1,3]">
<td>Team1</td>
<td class='score'> 22-31</td>
<td>Team3</td>
</tr>
<tr class="match-row" data-teams="[2,3]">
<td>Team2</td>
<td class='score'> 55-1 Blowout!</td>
<td>Team3</td>
</tr>
</table>
I have a page with several rows containing information, made by several users. I'm looking for a way to highlight the all the users rows on mouseover.
This "Highlight multiple items on hover's condition" almost solved my problem, but since the classes or id's in my problem are dynamic from a database, and would contain an identifier from the DB and are unique each time. I have not been able to apply it.
Example code: https://jsfiddle.net/3cehoh78/
<table class="testtable">
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 1a</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 2a</td>
<td class="cellclass">Frodo</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 3a</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 4a</td>
<td class="cellclass">Legoman</td>
<td class="cellclass">data</td>
</tr>
</table>
<br>
<br>
<table class="testtable">
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 1b</td>
<td class="cellclass">Sauron</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 2b</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 3b</td>
<td class="cellclass">Sam</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 4b</td>
<td class="cellclass">Legoman</td>
<td class="cellclass">data</td>
</tr>
<tr id="uniqueIDthatcantbechanged">
<td class="cellclass">Line 5b</td>
<td class="cellclass">Frodo</td>
<td class="cellclass">data</td>
</tr>
</table>
In this example, I want all the rows with "Sam" to be highlighted on mouseover on one of them, so rows 1a,3a,2b,3b.
I was thinking of adding a class to all the Sam rows when generating the tables (Sam has a unique user ID), but how do I then change css that affects all the rows on mouseover (and not just one).
Please note that I cant pre-add css classes for all the unique userID's, this is just an example.
Here a solution with JQuery https://jsfiddle.net/3cehoh78/5
$(document).ready(function() {
$( "tr" ).hover(function() {
var search = $(this).find("td:eq(1)").text();
$( ".highlight" ).removeClass("highlight");
$("tr:contains('"+search+"')").addClass("highlight");
}); /* END HOVER */
}); // end document ready
Simple solution without using jQuery and co: https://jsfiddle.net/3cehoh78/3/
var rows = [].slice.call(document.querySelectorAll('.testtable tr'));
rows.forEach(function(row) {
row.addEventListener('mouseover', function() {
resetHighlighting();
var name = row.querySelector('td:nth-child(2)').textContent;
rows.forEach(function(r) {
if (r.querySelector('td:nth-child(2)').textContent === name) {
r.classList.add('highlighted');
}
});
});
});
function resetHighlighting() {
rows.forEach(function(row) {
row.classList.remove('highlighted');
});
}
Here's another way using vanilla-JavaScript.
var tds = document.querySelectorAll('td');
var highlight = function () {
// take this person's name from the 2nd cell
var name = this.parentNode.children[1].innerHTML;
// highlight cells with same name
tds.forEach(function (td) {
var tr = td.parentNode;
// compare other's person name with this person name
// highlight if there is a match
tr.classList.toggle('highlight', tr.children[1].innerHTML === name)
});
}
// attach an event listener to all cells
tds.forEach(function (td) {
td.onmouseover = highlight;
});
Demo
I have the following HTML Table,
<table id="items">
<tr class="total_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Total</td>
<td class="total-value" id="total"><div id="totalone">$875.00</div></td>
</tr>
<tr class="disc" id="disc">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line">Discount</td>
<td class="total-value" id="discount"><div id="discountid"><input type="text" name="disco" class="dis"/></div> </td>
</tr>
<tr class="tax_up">
<td colspan="2" class="blank"> </td>
<td colspan="2" class="total-line balance">tax</td>
<td class="total-value" id="tax"><div id="tax">00</div></td>
</tr>
</table>
When i click on the button with id Discount, I need to change the value to the TD inside the div Tag with id "total" and set its value to another JavaScript variable?I tried the following, but it's not working.
$(".discountbtn").click(function(){
var test=$("#items #disc .dis").val(); //Easiest method
console.log("lol");
console.log(test);
var tot = roundNumber(test,2);
var new_tot=window.finale-tot;
console.log(window.finale);
console.log(new_tot);
$('#items #totalone').html("$"+new_tot);
//alert("button");
});
Try with my code that help you
change HTML <div id="totalone">$875.00</div> to $<span id="totalone">875.00</span>
$(document).ready(function() {
$("#discountbtn").click(function(){
var test=$("#items #disc .dis").val();
console.log(test);
var oldTotal = $("#totalone").text();
console.log(oldTotal);
var tot = Math.round(test * 100) / 100;
var new_tot=parseFloat(oldTotal)-tot;
console.log(new_tot);
$('#items #total').html(new_tot); //It was a jQuery selector glitch.
});
});
$('#items #totalone').html("$"+new_tot);
I don't know if I can explain this right...
I have a table like this:
<table>
<tr>
<td class="myTD">aaa</td>
<td class="myTD">bbb</td>
<td class="myTD">ccc</td>
<td class="myTD">ddd</td>
<td class="myTD">eee</td>
</tr>
</table>
Some jquery like this:
$('.myTD').on('click', function(e){
//... do some here ...//
});
when I click on a TD I want the node count of the clicked td.
E.g. if I click on ccc I want to alert 3
Is this possible in some way or do I have to explizit add an ID ?
$('.myTD').on('click', function(){
alert( $(this).index() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="myTD">aaa</td>
<td class="myTD">bbb</td>
<td class="myTD">ccc</td>
<td class="myTD">ddd</td>
<td class="myTD">eee</td>
</tr>
</table>
I have this structure to get data from another webstie
$searchURL = "http://www.anotherwebsite.com";
$html = file_get_contents($searchURL);
$patternform = '/(<tbody.*<\/tbody>)/sm';
preg_match_all($patternform ,$html,$matches);
preg
echo $matches[0][0];
<tr class="even hidden">
<td colspan="3">OB I</td>
<td colspan="5">vízilabda, ffi</td>
</tr>
<tr class="odd">
<td class="opener nowrap"><ins></ins>063</td>
<td class="center nowrap"><ins class="sport jegkorong" title="jégkorong"><span>jégkorong</span></ins>3</td>
<td><strong>Magyarország - Lengyelország</strong></td>
<td class="center">
1.59 </td>
<td class="center">
4.20 </td>
<td class="center">
3.55 </td>
<td class="nowrap">
P 18:15 </td>
<td class="nowrap">
nov. 08 </td>
</tr>
^^
I had this "input"
Question is:
How can I change three td value to javascript onclick event (extra: that I want to store the name of the event and I want to store the selected odds and add to new div or table line by line.)
I think preg_replace need but regexp. not my desk.
Why must javascript be used? Would simply using the HTML onclick work?
<td onclick="SomethingFunky">