This is what i have right now:
This is the table:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</table>
This is the javascipt
<script>
function hello(){
var r = document.getElementById("trId1").innerHTML;
alert(r);
}
</script>
The JavaScript gets E100 when its the first row is clicked which is correct but when E200 row is clicked it still shows E100, how would i get E200 and so on when there is more data? Is there a javascript only solution
To start, you can't have two Id's on the page that are the same as that is invalid HTML5 and will cause errors in some browsers. The reason why you're getting what you're getting is because when looking for an ID, most browsers only look for one occurrence of an ID (because that is precisely what valid HTML is, 1 unique id per page). So to fix up your HTML code and you may also want to have a header for your table:
<table border='1'>
<thead>
<tr>
<th>
Employee Code
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr class='display' onclick='hello(1);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(2);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</tbody>
</table>
Your best bet is to getElementsByClassName function and traverse the array to the one you want. (general change, code) Assuming you can't use JQuery at all for some reason:
<script>
function hello(rowClickedNumber){
var RowClicked = document.getElementsByClassName("trId1");
var r = RowClicked[0].innerHTML;
alert(r); //E100
var r = RowClicked[1].innerHTML;
alert(r); //E200
var r = RowClicked[rowClickedNumber].innerHTML;
alert(r);
}
</script>
However, an even simpler solution would be to use JQuery and would limit browser inconsistencies. After the document loads:
$(body).on("click", "tr", function(){
var getData =$(this).children(".trId1").getHTML();
console.log(getData);
});
Note: this is to allow when you inevitably add more items to the table (hence the reason why the code to get a child element of a row).
*EDIT: added the note
**EDIT: fixed the spelling and grammer
* EDIT: fixed the javascript function.
I have a solution for this. Please check the code and fiddle link below. Let me know if you have any question.
Fiddle
HTML:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
</table>
JavaScript:
function hello(obj){
alert(obj.childNodes[1].innerText); //The first child being a text node.
}
Related
I'm really new to AJAX. How can I get the value of id, symbol, name etc. and put it in my table? I tried everything even JSON.stringify but I could not find this question anywhere so...
API output: [{"id":"90","symbol":"BTC","name":"Bitcoin","nameid":"bitcoin","rank":1,"price_usd":"9813.14","percent_change_24h":"10.04","percent_change_1h":"1.80","percent_change_7d":"5.56","market_cap_usd":"180330472483.63","volume24":"38774320414.79","volume24_native":"3951263.62","csupply":"18376421.00","price_btc":"1.00","tsupply":"18376421","msupply":"21000000"}]
Here is the HTML code.
Note: class="info" is just for testing. I will assign unique id's to the td's when it works correctly
<body>
<h1>
Live cryptocurrency data
</h1>
<table>
<tr>
<td>
Symbol
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
Price USD
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
24h Volume USD
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
Market Cap USD
</td>
<td class="info">
-
</td>
</tr>
<tr>
<td>
Current supply
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Total supply
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Max supply
</td>
<td>
-
</td>
</tr>
<tr>
<td>
Percentage change 1h
</td>
<td>
-%
</td>
</tr>
<tr>
<td>
Percentage change 24h
</td>
<td>
-%
</td>
</tr>
<tr>
<td>
Percentage change 7d
</td>
<td>
-%
</td>
</tr>
</table>
<br>
<button>
Refresh Bitcoin data
</button>
</body>
Here is the Javascript code
$("button").click
(
function ()
{
$.ajax
(
{
url: "https://api.coinlore.net/api/ticker/?id=90",
method: "GET",
success: function(result)
{
$(".info").text(JSON.stringify(result));
}
}
)
}
);
Your API is returning an array with, in this case, 1 single object. Try result[0].id
Also, use dataType: 'json' in your Ajax options as per:
Parse JSON from JQuery.ajax success data
I'm trying to adapt other examples with similar questions here on stackoverflow... but am stumped right now.
Here's what my html table looks like after it's been rendered:
<table class="table table-striped" id="status">
<thead>
<tr>
<th>Name</th>
<th>REP</th>
<th>Package</th>
<th> CV</th>
<th>Latest CV</th>
<th>Custom </th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfasdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">tmm</td>
<td>tmm-4.2.7-r1</td>
<td>4.2.7-r1</td>
<td> </td>
<td class="status_button"><button type="button" class="btn btn-success"></button></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">a-cis</td>
<td>a-cis-0.1.0-r0</td>
<td>0.1.0-r0</td>
<td> </td>
<td class="status_button"><button type="button" class="btn btn-danger"></button></td>
</tr>
</tbody>
</table>
What I need:
After the table has been rendered, I want to find all rows that have a danger button ("btn-danger") and change the color of the text in the "Package" cell / td to red.
Based on similar questions here on stackoverflow, here's what I have so far:
122 <script>
123 $( document ).ready(function() {
124 $('.status_button').each(function(i, n) {
125 console.log($(n.innerHTML));
126 //somehow id the sibling <td> that has class
127 //package and change the font color
128 //to red
129 });
130 });
131
132 </script>
The console.log matches a property in the object and displays... but my "if" statement fails.
I was trying to copy the contents of my console.log to paste in here but haven't been successful yet.
Any tips on how i can test the value of the button class and then alter the text color in the Package field would be appreciated
Thanks.
EDIT 1
So I changed the each function to look for the btn-danger class ... and that seems to work better because it filters more results.
But I guess I still need help changing the sibling td with the class "package" to display text in red.
122 <script>
123 $( document ).ready(function() {
124 $('.btn-danger').each(function(i, n) {
125 console.log($(n.innerHTML));
126 if ($(n.innerHTML) == "button.btn.btn-danger") {
127 alert('red!!');
128 };
129 });
130 });
131
132 </script>
You can use :has selector to filter all cells with class status_button having the button you are looking for.
In order to change the color of cell with class package you can use siblings.
The snippet:
$(function () {
$('.status_button:has("button.btn.btn-danger")').each(function(index, element) {
$(element).siblings('.package').css('color', 'red');
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<table class="table table-striped" id="status">
<thead>
<tr>
<th>Name</th>
<th>REP</th>
<th>Package</th>
<th> CV</th>
<th>Latest CV</th>
<th>Custom</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfasdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">tmm</td>
<td>tmm-4.2.7-r1</td>
<td>4.2.7-r1</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-success"></button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">a-cis</td>
<td>a-cis-0.1.0-r0</td>
<td>0.1.0-r0</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-danger"></button>
</td>
</tr>
</tbody>
</table>
If you'd like to use jQuery, instead use the search for .btn-danger. It's simpler and does exactly what you want.
$(document).ready(function() {
$('.btn-danger').each(function(i, n) {
var thisRow = n.closest('tr');
$(thisRow).css("color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="status">
<thead>
<tr>
<th>Name</th>
<th>REP</th>
<th>Package</th>
<th> CV</th>
<th>Latest CV</th>
<th>Custom </th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>asfasdf</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">tmm</td>
<td>tmm-4.2.7-r1</td>
<td>4.2.7-r1</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-success"></button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="package">a-cis</td>
<td>a-cis-0.1.0-r0</td>
<td>0.1.0-r0</td>
<td> </td>
<td class="status_button">
<button type="button" class="btn btn-danger"></button>
</td>
</tr>
</tbody>
</table>
Hi there i have problem with Rails & Javascript. Here is my table in view.
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr id="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr id="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr id="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
and my JS is
$('#select_name').click(function(event){
var username = $("#select_name").text();
console.log(username);
});
I have lot of names in my table, but JS printed first name in console. How can I print each name in the table to console?
You are creating in the each-loop N links (by the number of users) with the same select_name ID. Your javascript is confused, which one to choose. Try to add user id to your html select_name id and adjust your javascript accordingly. Same about your other id adminrow.
OR simply change your select_name to be a class and not id:
....
%a{:href=>"#", :class=>"select_name"}=u.firstname
....
$('.select_name').click(function(event){ ....
Ok, I am attaching the full code for you. For me it works just fine. E.g. prints just the name after clicking on the corresponding link:
<table>
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="adminrow">
<td>
1
</td>
<td>
John
</td>
</tr>
<tr class="adminrow">
<td>
2
</td>
<td>
Alex
</td>
</tr>
<tr class="adminrow">
<td>
3
</td>
<td>
Paul
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('.select_name').click(function(event){
var username = $(this).text();
console.log(username);
});
</script>
My web application collects data with:
id (key value)
timestamp
value
Then, it creates an HTML table like this:
<table>
<tr bgcolor="#FFA9A9">
<td> ID1 </td>
<td> 20150619T09.43.03</td>
<td>VALUE1</td>
</tr>
<tr>
<td> ID2 </td>
<td> 20150619T09.43.02</td>
<td>VALUE1</td>
</tr>
<tr bgcolor="#FFA9A9">
<td> ID3 </td>
<td> 20150619T09.43.00</td>
<td>VALUE2</td>
</tr>
<tr>
<td> ID4 </td>
<td> 20150619T09.42.59 </td>
<td> VALUE1</td>
</tr>
<tr bgcolor="#FFA9A9">
<td> ID5 </td>
<td> 20150619T09.42.59 </td>
<td> VALUE2</td>
</tr>
<tr>
<td> ID6 </td>
<td> 20150619T09.42.58</td>
<td>VALUE2</td>
</tr>
<tr>
<td> ID7 </td>
<td> 20150619T09.42.55 </td>
<td> VALUE2 </td>
</tr>
<tr bgcolor="#FFA9A9">
<td> ID8 </td>
<td> 20150619T09.42.40 </td>
<td> VALUE2 </td>
</tr>
<tr>
<td> ID9 </td>
<td> 20150619T09.42.39 </td>
<td> VALUE2 </td>
</tr>
</table>
Explanation:
It sorts the timestamp value in DESC order.
If, for example, t1 is the timestamp for ID1 and 't2' is the timestamp for ID2, and...
t1 + 2 seconds >= t2
the ID2 row becomes red.
In my example:
ID1 is red (#FFA9A9) cause of ID2 (same value and timestamp between 2 sec)
ID3 is red cause of ID5 that is red cause of ID6.
ID8 is red cause of ID9
in that case ID1 is a copy and ID2 is original; ID3 and ID5 are a copy and ID6 is the original; ID8 is a copy and ID9 is it's original.
I've got to count the red copy and put the counter in another cell of the row that is the original.
The result of my example should be:
<table>
<tr>
<td> ID2 </td>
<td> 20150619T09.43.02</td>
<td>VALUE1</td>
<td>1</td> --> one record not shown (ID1)
</tr>
<tr>
<td> ID4 </td>
<td> 20150619T09.42.59 </td>
<td> VALUE1</td>
<td> 0 </td>
</tr>
<tr>
<td> ID6 </td>
<td> 20150619T09.42.58</td>
<td>VALUE2</td>
<td>2</td> --> two records not shown (ID3 and ID5)
</tr>
<tr>
<td> ID7 </td>
<td> 20150619T09.42.55 </td>
<td> VALUE2 </td>
<td> 0 </td>
</tr>
<tr>
<td> ID9 </td>
<td> 20150619T09.42.55 </td>
<td> VALUE2 </td>
<td> 1 </td> --> one record not shown (ID8)
</tr>
</table>
I need it because i've got 3 data collector and i need to understand which event is the same one repeated... If the value is the same and the timestamp are between 2 sec it is the same event and i need to take only the older one in table but i need also show that exists other captured copy of it...
Any help?
I can change class, name or anything else, but i need to do it when the html page is loaded and client side (so javascript or jQuery)...
I need to:
scan table row by row from first to last
understand if it is a red row
if it is a red row I need to start a count of red rows with same value before a row not red with the same value. then i put the counter in a new cell of the same not red row...
Thank you very much!!! (and sorry for my bad english!)
With jQuery you can select all tr elements with the attribute bgcolor="#FFA9A9" then use .size() or .length to get the count.
jQuery('tr[bgcolor="#FFA9A9"]').size();
api.jquery.com/attribute-equals-selector
Hope that is useful.
Edit: With the red lines selected like above you can also run an .each() over the selected elements and analyse their .children()
Edit 2: Maybe this is a useful approach?
trs = jQuery('tr:not[bgcolor="#FFA9A9"]');
redtrs = jQuery('tr[bgcolor="#FFA9A9"]');
for (i in trs)
{
tds = trs.eq(i).children('td');
for (j in redtrs)
{
redtds = redtrs.eq(j).children('td');
//do your checking here
}
}
the idea is to select all trs which are not red and all trs which are red.
Then iterate over the non-red trs and check their children tds against the red trs children tds (assuming the order of the tds is always the same). tds.eq(0) is the ID, tds.eq(1) is the time stamp tds.eq(2) the Value. So you can compare tds.eq(2) == redtds.eq(2) to match the values.
When you have a find you could up a counter and end up adding a fourth td with the counter value.
Try reading in on the jQuery selectors and the Javascript for in loop (or the jQuery.each which can be a bit more confusing for beginners though).
[1]: http://jsfiddle.net/uZRQt/1/
This is the link which can be used to remove all html tags inside the square brackets but should include the () round brackets inside teh square brackets.
Now can the regex be modified to remove all the html tags , and blank spaces (&nbps) should be removed but the content inside round bracket should be included :-
for example :-
'<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[<span>Assignment name</span>]</td> <td>[<span> Total No of staff-months of(hdhdhdh) the assignment</span>]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>'
should give output as
'<table style="height: 1000px; ; width: 500px;" border="1"> <tbody> <tr> <td>[Assignment name]</td> <td>[Total No of staff-months of(hdhdhdh) the assignment]</td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>'
I changed to single quotes for the main string like in http://jsfiddle.net/uZRQt/1/ and the alert works and returns what you asked. But was that the result you were asking for? I haven't understood completely your question.
can the regex be modified to remove all the html tags , and blank
spaces (&nbps) should be removed but the content inside round bracket
should be included :-
Check this one remove All tags and
regex:(?<=\[.*) (<[/]?[^>]*?>| )(?=.*\])