I have a table having many td. When I click the button I want some html elements inside a td. How can I solve this function using "this"?
$(document).ready(function () {
$("button").click(function clickMe(e) {
$(this).html ("this is hai")
});
});
table td {
border: 1px solid;
border-color: lightgray;
overflow:hidden;
height:17px;
/*max-height:10px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;">
<tr>
<td id="container"onclick="clickMe(this)"></td>
<td></td>
<td></td>
</tr>
</table>
<button id="container" > clickme</button>
</body>
</html>
So you want to resuse the clickMe function? Then you should place it globally and remove the parameter, which isn't necessary.
Btw: the duplication of the ids is bad practice, but it'll still work:
edit: You should use onclick="clickMe.call(this)" to bind the current element to this in the clickMe function.
function clickMe() {
$(this).html ("this is hai")
}
$(document).ready(function () {
$("button").click(clickMe);
});
table td {
border: 1px solid;
border-color: lightgray;
overflow:hidden;
height:17px;
/*max-height:10px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;">
<tr>
<td id="container" onclick="clickMe.call(this)"></td>
<td></td>
<td></td>
</tr>
</table>
<button id="container" > clickme</button>
</body>
</html>
$(document).ready(function () {
$("#table_id td").on("click", function(){
$(this).html("this is hai");
});
});
#table_id td {
border: 1px solid;
border-color: lightgray;
overflow:hidden;
height:17px;
}
#table_id{
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table id="table_id">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
I do not really know what you want, is it like this?
If you just want the content to be placed in the container OR the just try this:
//it is unclear to me _what you exactly want_ if _this_ is <b>not</b> what you want. Give me a comment on _what is not correct_ and i'll try to edit goodluck!
$('#my_button').on('click', function(){
$('#place_here').html ("this is hai")
});
table td {
border: 1px solid;
border-color: lightgray;
overflow:hidden;
height:17px;
/*max-height:10px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;">
<tr>
<td id="container"></td>
<td id="place_here"></td>
<td></td>
</tr>
</table>
<button id="my_button"> clickme</button>
</body>
You need to understand how jQuery and javascript works, your code doesn't make sense at all. Remember the ID should be unique you're better of using class if you need to implement it on a page multiple times. I created a demo so you could understand how should a script work.
I made your button that when clicked will populate the 3 td's, notice i reference the TD with their ID on jQuery button click event. After populating the TD you'll be able to click each TDs and it will output its HTML content. See the script below.
$(document).ready(function () {
$("button").click(function(e) {
$("#td1").html ("this is hai displayed at td1");
$("#td2").html ("this is hai displayed at td2");
$("#td3").html ("this is hai displayed at td3");
});
window.clickMe = function (data){
alert(jQuery(data).html());
}
});
table td {
border: 1px solid;
border-color: lightgray;
overflow:hidden;
height:17px;
/*max-height:10px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<table style="border-collapse:collapse;border:1px solid;width:10%;height:100px;margin-top:50px;" >
<tr>
<td id="td1" onclick="clickMe(this)"></td>
<td id="td2" onclick="clickMe(this)"></td>
<td id="td3" onclick="clickMe(this)"></td>
</tr>
</table>
<button id="container" > clickme</button>
</body>
</html>
change to :
<html>
<head></head>
<body>
<table id="table_id">
<tr>
<td>Td</td>
<td></td>
<td></td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#table_id td").on("click",function(){
$(this).html("this is hai");
})
})
</script>
</body>
</html>
Related
I am trying to set the background color of a cell in the html page from a simple javascript. Below is my html and javascript:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<!-- CSS -->
<style>
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
</style>
</head>
<body>
<meta http-equiv="refresh" content="30">
<script src ="Json_Development_Test.js">
</script>
<!-- HTML -->
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>Test</p>
</span>
</div>
</td>
<td>
<div>
<span id="header2">
<p>Test2</p>
</span>
</div>
</td>
<td>
<div>
<p>Test3</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
</body>
</html>
Javascript
window.addEventListener('load', function() {
console.log('All assets are loaded')
})
document.getElementById('headerID1').bgColor='#003F87'
Expected result:
I need to change the background color of the span id "headerID1" and following other span id as well.
Actual result:
The color is not getting changed and instead I am getting the following errors:
HTML1503: Unexpected start tag.
testDesign.html (26,1)
SCRIPT5007: Unable to get property 'style' of undefined or null reference
Json_Development_Test.js (4,1)
HTML1512: Unmatched end tag.
testDesign.html (32,1)
HTML1506: Unexpected token.
testDesign.html (43,2)
2 HTML1530: Text found within a structural table element. Table text may only be placed inside "caption>", "td>", or "th>" elements.
Can anyone help me to resolve this error?
Besides some errors related to invalid HTML, as mentioned by others, your background color won't change because you put <p> inside <span> which doesn't make any sence since <p> is a paragraph and <span> is a generic inline container for phrasing content. It will work though if you put <span> inside <p>:
<p id="header2">
<span>...</span>
</p>
But if you want to apply background to the entire cell, I recommend you to style the <td> element instead. Check the following example:
document.getElementById('headerID1').style.backgroundColor = 'blue';
document.getElementById('header2').style.backgroundColor = 'lightblue';
document.getElementById('header3').style.backgroundColor = 'lightblue';
.myTable {
width: 100%;
text-align: left;
background-color: lemonchiffon;
border-collapse: collapse;
}
.myTable th {
background-color: goldenrod;
color: white;
}
.myTable td,
.myTable th {
padding: 10px;
border: 1px solid goldenrod;
}
<table class="myTable">
<tr>
<th>PROJECT</th>
<th>Service</th>
<th>PrDC</th>
<th>DDC</th>
<th>Last Checked Time(IST)</th>
</tr>
<tr>
<td>
<div>
<span id="headerID1">
<p>BG doesn't work</p>
</span>
</div>
</td>
<td>
<div>
<p id="header2">
<span>BG works because <span> is inside <p></span>
</p>
</div>
</td>
<td id="header3">
<div>
<p>BG for entire cell</p>
</div>
</td>
<td>
<div>
<p>Test4</p>
</div>
</td>
<td>
<div>
<p>Test5</p>
</div>
</td>
</tr>
</table>
UPD: Probably you are getting SCRIPT5007: Unable to get property 'style' of undefined or null reference because your Json_Development_Test.js script starts executing when the rest document is not rendered yet. You can try to:
Put <script src ="Json_Development_Test.js"> to the bottom of the html
Put this line document.getElementById('headerID1').style.backgroundColor = 'blue'; inside the window.addEventListener('load', ...) callback:
window.addEventListener('load', function() {
console.log('All assets are loaded');
document.getElementById('headerID1').style.backgroundColor = 'blue';
});
Problem is with this line of code
document.getElementById('headerID1').style.background = 'blue'
use
document.getElementById('headerID1').bgColor='blue'
instead.
Also, HTML structure is wrong too.
Your HTML is invalid. When writing HTML you might want to use an HTML validator.
A few problems with your code:
the <head> should go right after the <html> tag, and you should close the <head> before opening the <body>.
Delete this line <div id ="test">
The property you want in your JS is backgroundColor, so you would have:
document.getElementById('headerID1').style.backgroundColor = 'blue';
I have a table which may have more than 100 rows
So i have used Scroll class giving fix height..
I have a radio button inside a table
Problem is when the table is rendered suppose a row No 50 is selected by default , it must go to that position by default
Every row has a respective class given by the row code..
I just want to scroll it to particular class.
The scroll is for the particular div.which i need to go to particular class inside table
HTML
<table class="table-scroll">
<tr class="radio1"><td>1</td></tr>
<tr class="radio2"><td>2</td></tr>
<tr class="radio3"><td>3</td></tr>
</table>
CSS
.table-scroll{
max-height:500px;
overflow-x:hidden;
overflow-y:scroll;
margin-bottom:20px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
JS
<script>
How to scroll to particular class suppose radio3??
</script>
You need scrollIntoView(options) to scroll the element into the view. Refer the docs for how to pass options object and for browser compatibility.
function scrollto()
{
var selectedclass = "radio15";
var table = document.getElementById("test");
var elem = table.getElementsByClassName(selectedclass)[0];
elem.scrollIntoView();
}
.table-scroll
{
max-height:100px;
overflow-y:scroll;
border:1px solid #000;
display:block;
}
<table class="table-scroll" id="test">
<tbody>
<tr class="radio1"><td>1</td></tr>
<tr class="radio2"><td>2</td></tr>
<tr class="radio3"><td>3</td></tr>
<tr class="radio4"><td>4</td></tr>
<tr class="radio5"><td>5</td></tr>
<tr class="radio6"><td>6</td></tr>
<tr class="radio7"><td>7</td></tr>
<tr class="radio8"><td>8</td></tr>
<tr class="radio9"><td>9</td></tr>
<tr class="radio10"><td>10</td></tr>
<tr class="radio11"><td>11</td></tr>
<tr class="radio12"><td>12</td></tr>
<tr class="radio13"><td>13</td></tr>
<tr class="radio14"><td>14</td></tr>
<tr class="radio15"><td>15</td></tr>
<tr class="radio16"><td>16</td></tr>
<tr class="radio17"><td>17</td></tr>
<tr class="radio18"><td>18</td></tr>
<tr class="radio19"><td>19</td></tr>
<tr class="radio20"><td>20</td></tr>
</tbody>
</table>
<button id="scroll" onclick="scrollto()">Scroll to radio15</button>
<tr class="radio3" id="radio3"><td>3</td></tr>
<script>
$(window).load(function(){
top.location.href = '#radio3';
});
</script>
I think it is heplful to you
I am new to Jquery, I have a requirement to show extra text only when mouse hover on the respective line
How can i change my jquery snippet without writing the same snippets 10 times for 10 different selectors
here the code:
<html>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
jQuery(function() {
$("#demoTable1").hide();
$( "#demo1" ).mouseover(function() {
$("#demoTable1").show();
});
$( "#demo1" ).mouseout(function() {
$("#demoTable1").hide();
});
$("#demoTable2").hide();
$( "#demo2" ).mouseover(function() {
$("#demoTable2").show();
});
$( "#demo2" ).mouseout(function() {
$("#demoTable2").hide();
});
});
</script>
<style>
tr {
background: #b8d1f3;
}
td {
font-size: 12px;
color: #000;
}
</style>
</head>
<body>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
</body>
</html>
You can do this using pure CSS, just make sure the element you are wanting to show is directly after the parent.
.child {
display: none;
}
.parent:hover .child {
display: inline;
}
<div class="parent">Hover over me
<div class="child">I will appear</div>
</div>
You can something like:
$("[id^='demoTable']").hide();
$("[id^='demo']").mouseover(function() {
$(this).find("div").show();
});
$("[id^='demo']").mouseout(function() {
$(this).find("div").hide();
});
tr {background: #b8d1f3;}
td {font-size: 12px;color: #000;padding: 10px;}
div {padding: 10px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id='demo1'> Service : All services are running
<div id='demoTable1'> some text here 1 </div>
</td>
</tr>
<tr>
<td id='demo2'> Service : All services are running
<div id='demoTable2'> some text here 2 </div>
</td>
</tr>
</table>
Parameterizing jquery should be easy. Give each td a class of 'demo' and the inner div a class of 'demoTable'. Then you can do somethingl ike this:
$( ".demo" ).mouseover(function() {
$(this).find(".demoTable").show();
});
$(".demo").mouseout(function() {
$(this).find(".demoTable").hide();
});
The technique you're looking for is called 'Don't Repeat Yourself', or DRY. The simplest way to achieve that in your case is to use class attributes to group elements with common functionality. You can then use DOM traversal within the event handlers attached to those elements to find the related content and amend it.
In this case you can use the hover() event to toggle() the child div element, something like this:
jQuery(function($) {
$(".demo").hover(function() {
$(this).find(".demo-table").toggle();
});
});
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
With that being said, JS is not the best technology to use for this. CSS is far more appropriate, using the :hover pseudo-selector:
tr { background: #b8d1f3; }
td {
font-size: 12px;
color: #000;
}
.demo-table { display: none; }
.demo:hover .demo-table { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 1 </div>
</td>
</tr>
<tr>
<td class="demo"> Service : All services are running
<div class="demo-table"> some text here 2 </div>
</td>
</tr>
</table>
I'm new to Javascript and I'm working on a project. Thanks to help from a online help website, I'm able to show/hide my table successfully.
When I click the h3 element, it opens up and append the anchor (in this situation, #1, #2, #3) to the URL.
I want to use this anchor element to open up the specific table from an external link from another web page. (e.g. at Home Page, I clicked on this testing.html#1, I want it automatically open the 1st table when I reach the page)
Thank you very much!
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS
<style>
#special1{ display: none }
h3 {text-align: center;
background-color: black;
color: white;
clear: both;
cursor: pointer; }
.newboxes {
display: none;
}
a {text-decoration: none;}
</style>
HTML
<a id="myHeader1" onclick="javascript:showonlyone('newboxes1');" href="#1"><h3>Table 1</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes1">
<tr>
<td>1</td>
</tr>
</table>
<a id="myHeader2" onclick="javascript:showonlyone('newboxes2');" href="#2"><h3>Table 2</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes2">
<tr>
<td>2</td>
</tr>
</table>
<a id="myHeader3" onclick="javascript:showonlyone('newboxes3');" href="#3"><h3>Table 3</h3></a>
<table border="1" align="center" cellspacing="10px"class="newboxes" id="newboxes3">
<tr>
<td>3</td>
</tr>
</table>
Note this only work if you are loading from a html page in the same domain.
JQuery's .load function is very versatile. To load the first table from testing.html, we can do:
$('#tableContainer').load('testing.html table:eq(0)');
2nd table:
$('#tableContainer').load('testing.html table:eq(1)');
and so on.
demo
Note that the 3 tables in the demo are loaded from here
If the URL ends with #1, and you need showonlyone('newboxes1') automatically executed:
if (window.location.hash.substr(1) == '1') {
showonlyone('newboxes1');
}
I have tabs one says 'Search' and the other says 'Tags'
Search is the default tab so it has a grey rounded edge table background while 'Tags' has a white rounded edge background.
I want to be able to put the mouse over 'Tags' and the background to change from white to grey. How is this done?
Here is the HTML code:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
And CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James
With :hover.
Sample:
http://jsfiddle.net/stKn3/
With Css
table:hover
{
background-color:gray;
}
or
table tr:hover
{
background-color:gray;
}
I think its better to have a single images as background(with corners #as you trying to do) of the tabs And changing the background image on mouseover event. Instead of splitting them and merging the pieces together again by div tags.
Follow these examples :
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html
Try this
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OR
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
EDIT:
Try this complete HTML.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
It needs some modifications to use on your code. Try it on your own.