I am working for a update on a chrome extension for a page where I have the following table.
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
I am trying to change the second tables color.
I have access to the first table, but need to somehow select the second table.
document.getElementsByClassName("MessageContent")[0]; // First table
Nothinng I have tried has worked.
Use querySelector instead, to select the first <td> inside a <tr class="MessageContent">:
document.querySelector('tr.MessageContent > td').style.backgroundColor = 'yellow';
<table>
<tr class="MessageContent">
<td colspan=3>
data
</td>
</tr>
</table>
If you need to be more specific and are sure the td always has colspan=3, then
document.querySelector('tr.MessageContent > td[colspan="3"]');
I am trying to build small calculator using HTML/CSS and JS.
The thing is that when I am trying to select buttons of the calculator from HTML script and add EventListener to them, they are not working properly. Here is part of my HTML:
`<table class="table1">
<tr>
<td id="n-1">1</td>
<td id="n-2">2</td>
<td id="n-3">3</td>
</tr>
<tr>
<td id="n-4">4</td>
<td id="n-5">5</td>
<td id="n-6">6</td>
</tr>
<tr>
<td id="n-7">7</td>
<td id="n-8">8</td>
<td id="n-9">9</td>
</tr>
</table>`
And here is my event function:
document.querySelector(.table1 td).addEventListener('click',function(){
console.log('It works');
var z = this.value;
console.log(z);
});
The only time I am receiving the console output is when I click on first cell of table (1). I am not sure why when I click on the other cells (for example 3 or 7) this do not work.
Thanks!
querySelector() Only returns one element, in your case it returns the first td inside .table1
If you want to add the listener to all td's you must use querySelectorAll():
document.querySelectorAll('.table1 td').addEventListener('click',function(){
.... // The rest of your code
});
More info here: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
I am working on a webpage which has a tabstrip depending on number of people in a deal. As it can be 1 for one deal and 3 for another, I have created the drop down items dynamically using a loop index.
<tr>
<td align="right">
<spring:messagecode="label.borrower.employer.status" />:
</td>
<td align="right">
<kendo:dropDownList name="employmentStatus${requestScope.loopIndex}"
dataTextField="text" dataValueField="value" style="width: 100%;"
select="employmentStatusOnClick(${requestScope.loopIndex})"
change="updateEmploymentInfo">
<kendo:dataSource data="${borrowerEmploymentStatus}"></kendo:dataSource>
</kendo:dropDownList>
</td>
I am able to see the drop down lists according to the number of people in a deal. However, this jsp is included in another main jsp and the "change" and "select" functions are in that main jsp. When a value is selected on a drop down, I want to capture it and then perform some operations.
<script>
function employmentStatusOnClick(index) {
console.log(exp.loopCounter);
console.log("counter: "+index);
var employmentStatusVal = $("#employmentStatus"+index).data(
"kendoDropDownList").text();
console.log(employmentStatusVal);
}
</script>
For output, I can see that the value of index is coming correctly. However, even before the page is fully loaded, i get the error that "TypeError: Cannot read property 'text' of undefined"
Things I have Tried So far:
1) Tried to add the script inside ready() function, but it then gives me an error that employmentStatusOnClick is not defined
2) Tried different variations of concatenating the index value with the base name of the drop down list
3) Tried passing the value into a variable and then putting it into the .text() function
4) Latest, I have even tried hardcoding the value of index as 0 to see if it works for the first case, but i still get the undefined error.
I suspect that it has to do something with the loading of the elements. For some reason, it is trying to run this code, even before the element name has been generated. I discussed with a friend and he suggested me to remove the select events and just use the change event instead. Tried that..no effect.
Now, I am planning to remove kendo drop-downs and just use javascript dropdowns as a last resort. Can you please suggest what could be the problem?
Update - HTML Code of the div from Browser:
<div id="tab-employment">
<table>
<tbody><tr>
<td>
<table border="1">
<tbody><tr>
<th>Employer Name</th>
<th>Occupation</th>
<th>Employment Status</th>
<th>Hiring Date</th>
</tr>
<tr align="center">
<td>Roagres</td>
<td>Assistant</td>
<td>Current</td>
<td>2018-03-12 11:59:06.0</td>
</tr>
</tbody></table>
</td>
<td style="width: 1%"></td>
<td>
<table style="display: inline-block;">
<tbody><tr>
<td align="right">Employment Status:</td>
<td align="right"><input name="employmentStatus0" style="width: 100%;" id="employmentStatus0"><script>jQuery(function(){jQuery("#employmentStatus0").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":employmentStatusOnClick(0),"dataSource":{"data":[{"text":"--Select--","value":"--Select--"},{"text":"Employed","value":"Employed"},{"text":"Self-Employed","value":"Self-Employed"},{"text":"Retired","value":"Retired"},{"text":"Seasonal","value":"Seasonal"},{"text":"Student","value":"Student"},{"text":"Unemployed","value":"Unemployed"},{"text":"TEST","value":"TEST"}]}});})</script></td>
</tr>
<tr>
<td align="right">Industry Sector:</td>
<td align="right"><input name="industryStatus" style="width: 100%;" id="industryStatus"><script>jQuery(function(){jQuery("#industryStatus").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":industryStatusOnClick,"value":"1","dataSource":{"data":[{"text":"--Select--","value":"8443"},{"text":"Agriculture/Fishing/Forestry/Mining","value":"8444"},{"text":"Food/Foodservice/Hospitality","value":"8445"},{"text":"Arts/Entertainment/Recreation/Sports","value":"8446"},{"text":"Insurance, Accounting and Banking","value":"8447"},{"text":"Design/Creative","value":"8448"},{"text":"Construction & Skilled Trades","value":"8449"},{"text":"Education and Training","value":"8450"},{"text":"Government/Public Administration","value":"8451"},{"text":"Engineering/Architecture","value":"8452"},{"text":"Manufacturing/Production/Operation","value":"8453"},{"text":"Medical and Healthcare","value":"8454"},{"text":"Media/Telecommunication/Communication","value":"8455"},{"text":"Religion","value":"8456"},{"text":"Legal Services","value":"8457"},{"text":"Emergency and Protection","value":"8458"},{"text":"Real Estate","value":"8459"},{"text":"Professional, Scientific, and Technical Services","value":"8460"},{"text":"Information Technology","value":"8461"},{"text":"Transportation and Utilities","value":"8462"},{"text":"Sales/Marketing/Retail","value":"8463"}]}});})</script></td>
</tr>
<tr>
<td align="right">Express Occupation:</td>
<td align="right"><input name="expressOccupation" style="width: 100%;" id="expressOccupation"><script>jQuery(function(){jQuery("#expressOccupation").kendoDropDownList({"dataTextField":"text","dataValueField":"value","change":expressOccupationOnClick,"value":"1"});})</script></td>
</tr>
<tr>
<td align="right">Other - Specify:</td>
<td align="right"><input type="text" id="otherSpecify" name="otherSpecify" disabled="disabled" class="k-textbox" style="width: 100%;"></td>
</tr>
<tr>
<td colspan="2">
<div id="empStatusMsg" style="margin: 0 0 0 0; color: red; width: 300px; float: right;"></div>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
So guys, finally I was able to figure this out. Seems like the issue was with the kendo tag libraries or atleast my implementation of them. Before the page was even loaded, the change event was being fired up.
Therefore, I removed the change event from the kendo tag definition and rather used the jquery on change event nested inside document.ready(). After this it started working fine.
<table border="1" cellpadding="5" id="newtable">
<tr>
<th>Room No</th>
<th>AC</th>
<th>Deluxe</th>
<th>Tariff</th>
</tr>
<c:forEach var="room" items="${myrooms}">
<tr bgcolor="#4B476F" onMouseOver="this.bgColor='gold';" onMouseOut="this.bgColor='#4B476F';">
<td class="nr"><c:out value="${room.roomno}" /></td>
<td><c:out value="${room.ac}" /></td>
<td><c:out value="${room.deluxe}" /></td>
<td>₹<c:out value="${room.price}" /></td>
<td><button type="button" class="mybutton" onclick="rowFunction()">Pay</button> </td>
</tr>
</c:forEach>
</table>
On clicking the button corresponding to every row, I want my script to return the Room number i.e. the first cell data of the row. I have tried a lot of things after referring various articles on the Internet. Nothing seems to work. Please help.
You can use something like
Demo
$(window).on('click', '.mybutton' ,function() {
alert($(this).parent().parent().find('.nr').text());
//Or you can use, which is even better
//alert($(this).parent().siblings('.nr').text());
});
Here, the selector is pretty simple, we are first binding click event on the button, and onclick we select the button element parent i.e td and we select the parent of td i.e tr and later we find an element with a class of .nr
You can also write td.nr instead of just .nr to be more specific.
Your rows are being dynamically added, in order for your click listener to work you will have to delegate the events
Credits to #Patsy Issa for suggesting .siblings()
$(".mybutton").click(function(){
alert($(this).parent().siblings().eq(0).text());
});
usually im using DataTables js for solution, you can check at: https://datatables.net/reference/api/row().data()
I want to replace a particular text in an HTML with another text from another element, which in this case is a table data.().
Here is my table:
<table id="hftable">
<tr>
<td id="hfpn1">V.Sehwag</td>
<td id="hfp1">DNB</td>
<td id="hfp1b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn2">G.Gambhir</td>
<td id="hfp2">DNB</td>
<td id="hfp2b">.-.-..-.</td>
</tr>
<tr>
<td id="hfpn3">A.Arora</td>
<td id="hfp3">DNB</td>
<td id="hfp3b">.-.-..-.</td>
</tr>
</table>
where batsman1 is the id of the element where the replacement is to take place or more specifically the table looks like:
<table id="current">
<tr>
<td id="batsman1">Batsman 1</td>
<td id="currentbat1"></td>
</tr>
<tr>
<td id="batsman2">Batsman 2</td>
<td id="currentbat2"></td>
</tr>
<tr>
<td>Bowler</td>
<td></td>
</tr>
</table>
I want to replace Batsman 1 (in the table with id="current") with V.Sehwag (in the table with id="hftable") (when someone clicks on a specific button on the page)
I have tried:
$("#batsman1").text($("#hfpn1").val());
This isn't working. Apart of showing "V.Sehwag" in place of "Batsman 1", it is showing me a blank space.
Any ideas where I am wrong? What is the correct and easy way to do this?
Thank You.
Try to use .text() in this context, You are invoking .val() function over a non-input element, obviously it wont work. And do remember that, .val() only works on input elements on which user can input something via the UI.
$("#batsman1").text($("#hfpn1").text());
The TD element does not have a value, it has text. Modify your code as follows:
$("#batsman1").text($("#hfpn1").text());
Here's the jsFiddle
Use the below, I hope this will help you out to fix the problem.
$("#batsman1").html($("#hfpn1").text());