Float <div> element on top of table? - javascript

When the <div> is expanded, the table gets expanded too. I intend to expand only the <div>, floating it over the table. How can I do this?
$(document).ready(function() {
$("div").click(function() {
$("div").css({
"height": "100px"
});
});
});
div {
background-color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr>
<td>
<div>click</div>
</td>
</tr>
</table>

All you need is to set position:absolute for your div.
See CSS Layout - The position Property reference.
$(document).ready(function(){
$("div").click(function(){
$("div").css({"height":"100px"});
});
});
div{
background-color:grey;
}
table tr td{
height:20px;
width:20px;
}
div{
position:absolute;
top:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr><td>
<div>click</div>
</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr>
<td>click</td>
<td>
2
</td>
</tr>
<tr><td>
click
</td>
<td>
2
</td>
</tr>
</table>

Related

Show table cell details when cell is clicked in modal or as popoup or alert dialog

I have designed Table with One row with title of month and cell that has inner table with separate rows and cell.I would like to show the content of any cell form innertable details when row of parent table is clicked.
For example, If any user click January, then it would show the details of events of Month of January as alert Dialog box/popup or alert Dialog box which can be later cancelled with close button.
Here is my table.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Events</h1>
<table>
<tr>
<th>Month</th>
</tr>
<tr>
<td>January
<table>
<tr>
<td>Events</td>
</tr>
<tr>
<td>This is information I want to show as modal when this January cell is clicked</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>February
<table>
<tr>
<td>Events</td>
</tr>
<tr>
<td>This is information I want to show as modal when this Feburary cell is clicked</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Is it possible. Thanks for your any help in advance.
I hope this is what you asking?
Also I see that you're not correctly using the tr and tds as expected you have to make each row for ex. january, feb etc... and not to create a table inside td, since the the below code checks on row as you requested the other contents too are in the row, which may alert again with only those child values.
What I am trying to say is try to order the data in row and data wise.
$("table tr").click(function() {
alert($(this).children("td").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Events</h1>
<table>
<tr>
<th>Month</th>
</tr>
<tr>
<td>January
<table>
<tr>
<td>Events</td>
</tr>
<tr>
<td>This is information I want to show as modal when this January cell is clicked</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>February
<table>
<tr>
<td>Events</td>
</tr>
<tr>
<td>This is information I want to show as modal when this Feburary cell is clicked</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
here is the sample example what you can achieve or you can further explore more options:
$(".MainTable tr").click(function() {
alert($(this).children("td").text());
});
.MainTable,
tr,
td {
border: 1px solid red;
width: 80%;
}
.row td {
display: flex;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Events</h1>
<table class="MainTable">
<tr>
<th>Month</th>
</tr>
<tr class="row">
<td>January
</td>
<td>Events</td>
<td>
This is information I want to show as modal when this January cell is clicked
</td>
</tr>
<tr class="row">
<td>
February
</td>
<td>Events</td>
<td>
This is information I want to show as modal when this February cell is clicked
</td>
</tr>
</table>
</body>

How do I set fixed table's size after clicking 'expand' button

I have a table which is hidden by default and can only be seen after clicking "expand" button. The problem is when I click the button, the whole tr where this button is located messes up. Here's what I mean
$(document).ready(function() {
$('.partTableContent').hide();
$('.expandButton').click(function() {
// .parent() selects the A tag, .next() selects the P tag
$(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750);
});
});
<style>.partsTable {
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="partTableDiv">
<table class="partsTable" style="width: 100%; height: 30vh">
<tr>
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>
<tr>
<td colspan="4">
<div class="partTableContent">
<table style="width: 100%">
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
</table>
</div>
</body>
See? When I click expand button, the whole tr's (where this button is located) height shrinks. Especially noticeable when click "Full page". How can I avoid it and make it the height static?
plz give a height for the first tr say height: 50px;
<table class="partsTable" style="width: 100%;">
<tr style="height: 30vh">
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>

Targeting even rows of table through jQuery

I want to give orange color to even rows through jQuery in table.
But that is not working for me.
Below is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
Below is the code in custom.css:
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
Below is the code in custom.js:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
I am a beginner in jQuery.
I am looking for a short and simple way.
$(document).ready(function(){
$('.myTable tr:even').addClass('highlight');
});
Remove dot from addClass function
You dont really need jQuery to get this effect. Unless, you have a specific use case / requirement, you could just use the odd, even pseudo classes to accomplish your need.
Here is a sample.
table,
table td {
border: 1px solid white;
background: green;
color: white;
}
table tr:nth-child(even) td {
background-color: orange;
}
.highlight {
background: orange;
}
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>
This is a small example using CSS and jQuery :
// Execute a function when the DOM is fully loaded.
$(document).ready(function () {
// Set the .alt class for the alternate rows
$('.myTable tr:nth-child(even)').addClass('alt');
});
/** Style for the body **/
body {
font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}
/** Main class for the alternate rows **/
.alt {
background-color:#eee;
}
/** Style for the table **/
.myTable {
border-collapse:collapse;
font-size: 0.917em;
max-width:500px;
min-width:450px;
}
.myTable td {
border:1px solid #333;
padding:4px 8px;
}
.myTable td:nth-child(1) {
width:200px;
}
.myTable td:nth-child(2) {
width:150px;
}
.myTable td:nth-child(3) {
width:100px;
}
/** Style for the cointainer **/
#body {
clear: both;
margin: 0 auto;
max-width: 534px;
}
html, body {
background-color:White;
}
hr {
margin-bottom:40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="body">
<h3>Table 1</h3>
<table class="myTable">
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td>1600</td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
<h3>Table 2</h3>
<table class="myTable">
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
</table>
</div>
You are almost there. The problems in your code are
You want to highlight td and your selector is tr.
Syntax for .addClass() should be addClass('highlight') and not addClass('.highlight').
Replace this:
$(document).ready(function(){
$('.myTable tr:even').addClass('.highlight');
});
with:
$(document).ready(function(){
$('.myTable td:odd tr').addClass('highlight');
});
According to documentation :odd selects even rows:
In particular, note that the 0-based indexing means that, counter-intuitively, :odd selects the second element, fourth element, and so on within the matched set.
RUNNING CODE:
$(document).ready(function(){
$('.myTable tr:odd td').addClass('highlight');
});
table,table td{
border: 1px solid white;
background: green;
color: white;
}
.highlight{
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="myTable">
<tr>
<td>
one
</td>
<td>
two
</td>
</tr>
<tr>
<td>
three
</td>
<td>
four
</td>
</tr>
<tr>
<td>
five
</td>
<td>
six
</td>
</tr>
<tr>
<td>
seven
</td>
<td>
eight
</td>
</tr>
</table>

JQuery change height of div automatically

I have the following html structure as shown in this fiddle -
https://jsfiddle.net/0r277q7r/4/
Some rows in the table1 are shwon and hidden on check of checkbox like this -
function hideshow(){
if($('#checkShow').is(':checked')){
$('.before').hide();
$('.after').show();
}else{
$('.before').show();
$('.after').hide();
}
}
Some rows in table1 are hidden and some others are shown when you check the checkbox.
I want to change the height of table2 as and when the height of table1 changes, so that both the tables are of equal height.
What will the jquery code be like?
Thanks.
Your jquery can be reduced to 2 lines with the toggle() function
function hideshow() {
$('.before').toggle();
$('.after').toggle();
}
If you give your main table an id say table1 and change your 2nd table to have an id table3, then give a height to table1 in px then change the height of table2 and table3 to be 100%
function hideshow() {
$('.before').toggle();
$('.after').toggle();
}
#table1 {
height: 100px;
}
#table2 {
height: 100%;
}
#table3 {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table1" style="border:1px solid black">
<tr>
<td>
<table style="border:1px solid black" id="table2">
<tr class="before">
<td>some content</td>
</tr>
<tr class="before">
<td>some content</td>
<td>some other content</td>
</tr>
<tr>
<td>
<input type="checkbox" id="checkShow" onclick="hideshow();" />
</td>
</tr>
<tr class="after" style="display:none">
<td>show only when check is checked</td>
</tr>
</table>
</td>
<td>
<table style="border:1px solid black" id="table3">
<tr>
<td>other div2 stuff here</td>
</tr>
</table>
</td>
</tr>
</table>
Try this :
$(document).ready(function(){
$("#checkShow").on("change",function(){
var state = $(this).prop("checked");
if (state) {
$('.before').hide();
$('.after').show();
}
else {
$('.before').show();
$('.after').hide();
}
})
})
Final code :
<html>
<title>This is test</title>
<head>
</head>
<body>
<table border="1">
<tr>
<td>
<table style="border:1px solid black" id="table2">
<tr class="before">
<td>some content</td>
</tr>
<tr class="before">
<td>some content</td>
<td>some other content</td>
</tr>
<tr>
<td><input type="checkbox" id="checkShow"/></td>
</tr>
<tr class="after">
<td>show only when check is checked</td>
</tr>
</table>
</td>
<td>
<table style="border:1px solid black" id="table2">
<tr>
<td>other div2 stuff here</td>
</tr>
</table>
</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#checkShow").on("change",function(){
var state = $(this).prop("checked");
if (state) {
$('.before').hide();
$('.after').show();
}
else {
$('.before').show();
$('.after').hide();
}
})
})
</script>
</body>
</html>

how to replace values in innerhtml using javascript

I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...
This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for

Categories