JQuery change height of div automatically - javascript

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>

Related

How to make a <tr> element in vuejs that contains <slot> with html

I would like to make a table row component that can contain a slot which has html in it. The problem is that the browser hoists the text out of the table before vuejs has a chance to render it.
For example, I'd like to make a table like this https://codepen.io/mankowitz/pen/LqLRWr
td, th {
border: 1px solid red;
}
.main-table {
border: 2px solid blue;
}
<table class="main-table">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3">Collapsed row</td>
</tr>
<tr>
<td>
<p>text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</td>
<td> Col2 </td>
<td> Col3 </td>
</tr>
<tr>
<td>
regular row col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</table>
However, when I put it in a vue template, the formatting is all wrong. See https://codepen.io/mankowitz/pen/PVmBxV
Vue.component("table-row", {
props: ["collapsed"],
template: `
<tr>
<td v-if="collapsed" colspan="3">collapsed row</td>
<td v-if="!collapsed"> <slot /> </td>
<td v-if="!collapsed"> col2 </td>
<td v-if="!collapsed"> col3 </td>
</tr>
`
});
const example = {};
const app = new Vue(example);
app.$mount("#app");
th, td {
border: 1px solid red;
padding: 1px;
}
.main-table {
border: 2px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="main-table">
<thead>
<tr>
<th>Main Col 1</th>
<th>Main Col 2</th>
<th>Main Col 3</th>
</tr>
</thead>
<tbody>
<!-- This row has table inside table -->
<table-row :collapsed="1">
<p>title text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</table-row>
<!-- This row is normal -->
<table-row :collapsed="0">
This row is not collapsed
</table-row>
<!-- This row is collapsed (hidden) -->
<table-row :collapsed="1">
This row is collapsed
</table-row>
</tbody>
</table>
</div>

I made it work with the vue render function, you can probably do it with the template, but it will be longer:
Vue.component("table-row", {
props: ["collapsed"],
render: function(h) {
if (this.collapsed == 1) {
return h('tr', [h('td', {attrs: {colspan: 3}}, 'collapsed')]);
}
return h('tr', this.$slots.default);
}
});
const app = new Vue({el: '#app'});
th, td {
border: 1px solid red;
padding: 1px;
}
.main-table {
border: 2px solid blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="main-table">
<thead>
<tr>
<th>Main Col 1</th>
<th>Main Col 2</th>
<th>Main Col 3</th>
</tr>
</thead>
<tbody>
<!-- This row has table inside table -->
<tr is="table-row" :collapsed="0">
<td>
<p>title text</p>
<table>
<tr>
<th>embedded table header</th>
</tr>
<tr>
<td>embedded table text</td>
</tr>
</table>
</td>
<td></td>
<td></td>
</tr>
<!-- This row is normal -->
<tr is="table-row" :collapsed="0">
<td>This row is not collapsed</td>
<td></td>
<td></td>
</tr>
<!-- This row is collapsed (hidden) -->
<tr is="table-row" :collapsed="1">
<td>This row is collapsed</td>
</tr>
</tbody>
</table>
</div>
Note that if you use the slot as per my example you'll still have to include the <td> nodes.

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>

Tables with same height using JavaScript/CSS

I have a task where I am trying to align four tables in a page which is then printed.
But for some reason I am unable to align them with same height. I have a constraint to use only <table> <tr><td> structure.
Below is the current picture, because the data is variant in each table:
And I am trying to achieve is the below because no matter which table has how much data, all of them should be of equal height:
Any help would be great.

Take a look at flexboxes:
.wrapper {
display: flex;
}
table {
display: flex;
margin-left: 5px;
border: 1px solid #000000;
}
<div class="wrapper">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
</div>

Get each table's total number of rows. Then get the maximum from these numbers :
<script type="text/javascript">
function max(tab_num_rows) { // you put the numbers into an array
var ret = tab_num_rows[0];
for (var i=1 ; i<tab_num_rows.length; i++) {
if (ret < tab_num_rows[i])
ret = tab_num_rows[i];
}
return ret;
}
</script>
Then you make a JQuery to loop each table to add extra rows until the maximum is reached.

Flexbox will be the typical solution for this (see the other answer), however, if you are also restricted to NOT use flexbox (for example because of compatibility requirements to older browsers), you can put all four tables into the cells of one "wrapper table", like
.wrap {
width: 100%;
}
td {
background: #eee;
vertical-align: top;
}
<table class="wrap">
<tr>
<td>
<table>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Three</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
</table>
</td>
</tr>
</table>

Click button and go back to first one after first click

<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
This is my html code.
After clicking the button, the table will change the height and width size.
I want to do this: after changing the size, if user clicks the button again, the table will change back to its original size or maybe it can change the size again as its original size.
Thank you!

If you accept css involved, you can use toggle to toggle certain class to achieve that.
And from, css length, 1000 is not a valid css value, you should use something like '1000px', otherwise the width/height would take no effect.
#myTable.changed {
width: 500px;
height: 300px;
}
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
document.getElementById('myTable').classList.toggle('changed');
return true;
}
</script>
</head>
<body>
<!-- Note that the style you give here would not have an effect, as `height:1000` or `width:400` are not valid css length -->
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
And if css is not in concern, then you can just use a flag to decide the behavior of that function, jsfiddle
<script type="text/javascript">
var changeFlag = false;
function change() {
var table = document.getElementById('myTable');
changeFlag = !changeFlag;
var width, height;
if (changeFlag) { // Click in odd, then change to new w/h
width = '500px';
height = '600px';
} else { // Click in even, change to origin size.
width = '400px';
height = '1000px';
}
table.style.width = width;
table.style.height = height;
return true;
}
</script>

<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change()
{
if(document.getElementById('myTable').style.height == "400px") {
document.getElementById('myTable').style.height= "1000";
document.getElementById('myTable').style.width= "400";
}
else {
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>
I changed change function to work with your purpose.
Let you check this code

try this :
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
var isToggled = false;
function toggleSize()
{
if(!isToggled)
{
document.getElementById('myTable').style.height= "400";
document.getElementById('myTable').style.width= "1000";
isToggled = true;
}
else
{
document.getElementById('myTable').style.height= "900";
document.getElementById('myTable').style.width= "400";
isToggled = false;
}
return true;
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="toggleSize()" value="Change It">
</center>
</body>
</html>

Try this
.myTable1 {
height : 1000px;
width : 400px;
}
.myTable2 {
height : 400px;
width : 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>eLab</title>
<script type="text/javascript">
function change(){
$('#myTable').toggleClass("myTable1");
$('#myTable').toggleClass("myTable2");
}
</script>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1" id="myTable" align="center" class="myTable1">
<tbody>
<tr>
<th>This is the head!</th>
<th>I'm the head too!</th>
</tr>
<tr>
<td align=center>Part 1</td>
<td align=center>Part 2</td>
</tr>
<tr>
<td align=center>Part 3</td>
<td align=center>Part 4</td>
</tr>
<tr>
<td colspan="2" align=center> Part 5</td>
</tr>
</tbody>
</table>
<center>
<input type="button" onclick="change()" value="Change It">
</center>
</body>
</html>

jquery to highlight the selected row and column in a table

I want to highlight the complete row and column of the selected cell in a html table using jquery. I came across many examples using CSS but could not find using jquery. Please suggest.
Please find the fiddle : http://jsfiddle.net/0w9yo8x6/70/
Below is the html code:
<div>
<table>
<tr>
<td>
<table border="1px">
<tr>
<td></td>
<td bgcolor="grey">
<br>Column1
</td>
<td bgcolor="grey">
<br>Column2
</td>
<td bgcolor="grey">
<br>Column3
</td>
<td bgcolor="grey">
<br>Column4
</td>
<td bgcolor="grey">
<br>Column5
</td>
</tr>
<tr>
<td bgcolor="grey" >Row1</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row2</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
<tr>
<td bgcolor="grey">Row3</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data1 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data2 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data3 </td>
</tr>
</table>
</td>
<td >
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data4 </td>
</tr>
</table>
</td>
<td>
<table style="width:80%;margin:auto;border: 1px;">
<tr>
<td>
Data5 </td>
</tr>
</table>
</td>
</tr>
</table></td></tr></table></div>
--EDIT--
I cannot simplify/modify my table structure as it is generating dynamically and retrieving the values from database and display's in cells. With my existing structure as i shown in the question / fiddle http://jsfiddle.net/0w9yo8x6/70/ i need to achieve the row and column highlight.
Thanks.

CSS-Tricks covered a small tutorial on how to do this with JS/jQuery here:
http://css-tricks.com/row-and-column-highlighting/
The best way is shown here:
$("table").delegate('td','mouseover mouseleave', function(e) {
if (e.type == 'mouseover') {
$(this).parent().addClass("hover");
$("colgroup").eq($(this).index()).addClass("hover");
}
else {
$(this).parent().removeClass("hover");
$("colgroup").eq($(this).index()).removeClass("hover");
}
});
#page-wrap { width: 600px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 10px; }
.slim { width: 88px; }
.hover { background-color: #eee; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1" width="100%">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>test</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

You can simplify your table like this:
<table>
<tr><td> <td>Column1<td>Column2<td>Column3<td>Column4<td>Column5
<tr><td>Row1<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row2<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
<tr><td>Row3<td>Data1 <td>Data2 <td>Data3 <td>Data4 <td>Data5
</table>
Many people close trs and tds, but I choose not to, because those are optional closing tags in HTML5, and in my experience, they were never needed in HTML4. (Google's Style Guide also recommends omitting optional tags.)
All presentation styles should be done in a CSS style sheet, like this:
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
tr:first-child, td:first-child {
background: lightgrey;
}
.hovered {
background: yellow;
}
With jQuery, you can add a hover event to the table's tds, which toggle the hovered class for the td's parent row and all the tds in its column:
$('td').hover(function() {
$(this).parent('tr').toggleClass('hovered');
$('td:eq('+this.cellIndex+')','tr').toggleClass('hovered');
});
Fiddle
Edit
Since you can't change your layout, the highlighting functionality is a bit more difficult. In this case, you can use jQuery to change your multi-table layout to a single table:
$('table:first-child').replaceWith($('table', 'table:first-child').html());
$('table').each(function() {
var td= $('td', this);
if(td.length === 1) {
$(this).replaceWith(td.html());
}
});
This allows the highlighting code to work on your existing HTML.
New Fiddle

Categories