Below the structure where i have problem
<tr>
<td>1</td>
<td>2</td>
<td>
<button onclick=someFunc() class='btn'>DoSomething</button>
</tr>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div id='container'></div>
</td>
</tr>
And here i can't get access to column with id colspan ='3' and div with id 'container' when button pressed.
I know its very noob question, but i'm new in javasript and can't find specific question with good explanation.
Here I'm trying to get access to my div
$(".btn").click(function(){
$(this).parent('tr').next('td').hide();
});
EDIT
Its table of some information order. And when button clicked accordingly div must hide or show graph. Graph will be in div with class = "container". So my thought is to show some statistic information, and if user want to show graph i show him it.
The button's parent is td not tr you need to use closest() to find the tr containing the button, then use .next() to get the next tr element and .find('td') to find the td inside it
jQuery(function($) {
$(".btn").click(function() {
$(this).closest('tr').next().find('td').hide();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>
<button onclick=someFunc() class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style="height: 400px; width: 500px">
<div id='container'>soemthing</div>
</td>
</tr>
</table>
And when button clicked accordingly div must hide or show graph.
Try substituting .toggle() for .hide()
Yes, I can make like this. But i have hundreds block of codes like
above. And accordingly hundreds divs with id "container". I want
special make special function that hides only in block where
button i pressed.
Try changing id=container to class=container , then select container to toggle utilizing .index()
$(".btn").on("click", function(e) {
// substituted `.toggle()` for `.hide()`
$(".container").eq($(this).index(".btn")).parent().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>
<button class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div class='container'>a</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<button class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div class='container'>b</div>
</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>
<button class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style = "height: 400px; width: 500px">
<div class='container'>c</div>
</td>
</tr>
</tbody>
</table>
$(this).parents('tr').next('tr').hide()
this might work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>
<button onclick='someFunc(this)' class='btn'>DoSomething</button>
</td>
</tr>
<tr>
<td colspan='3' style="height: 400px; width: 500px">
<div id='container'>soemthing</div>
</td>
</tr>
</table>
<script>
function someFunc(BTN){
$(BTN).closest('tr').next('tr').find('td').hide();
}
</script>
Demo
Related
I've a table in my code which contains lots of rows and every row contains some td's, I want to find all the td's having z-index value.
For Example -
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style="z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style="z-index: 20">jam</td>
</tr>
</tbody>
</table>
Can anybody help me to find all the td's having z-index value without using any loop?
You can find all the td's, then filter out those which don't have any z-index set. I'm fairly sure there's no way to do the initial select on a more specific level than this.
const test = [
...document.getElementsByTagName("td")
].filter(x => x.style.zIndex !== "")
test.forEach(x => x.style.color = "#"+((1<<24)*Math.random()|0).toString(16))
console.dir(test)
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style="z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style="z-index: 20">jam</td>
</tr>
</tbody>
</table>
So this is give you the same result but with jquery and this is why i added a
position:relative
For z-index to work correctly, every element that has a z-index property must also have any position set ( e.g.position:relative )
$(document).ready(function() {
$("td").each(function() {
// td Element
const $this = $(this);
// your logic condition
if ($this.css("z-index") !== "auto") {
$this.css("color", "red");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>name</td>
</tr>
</thead>
<tbody>
<tr>
<td style=" position: relative; z-index: 10">jhon</td>
</tr>
<tr>
<td>
doy
</td>
</tr>
<tr>
<td style=" position: relative; z-index: 20">jam</td>
</tr>
</tbody>
</table>
here i want to remove a specific class from a <td><td> inside table and i have a another table in which i have a button and by clicking on this button i want to remove class of <td><td> which is in different table.
My HTML is As Like
<table id="test">
<tr>
<td class="background"></td>
<td></td>
<td class="background"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="background"></td>
<td class="background"></td>
<td class="background"></td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
Jquery Code am trying is
$("#Close").click(function () {
$('#test', 'tr','td').removeClass("background");
});
Try this:
$("#Close").click(function () {
$('#test td').removeClass("background");
});
$('#test td').removeClass('background');
Maybe this will help:
document.getElementById('tdid').className = '';
$("#Close").click(function() {
$('.background').removeClass("background");
});
.background {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<tr>
<td class="background">1</td>
<td>1</td>
<td class="background">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td class="background">1</td>
<td class="background">1</td>
<td class="background">1</td>
</tr>
</table>
<table>
<tr>
<td>
<div id="Close">
<span>Click Me</span>
</div>
</td>
</tr>
</table>
If you want to remove all then select the class then remove that class.
I have this table, that should be a button that link to another page. The reason is that the values of the table should be changeable with data from a database. The parameter can be changes to pH for example and the Value to 7 or something. But the table/button shall link to the same page. Where it is possible to set the Target.
So far this i what i got:
<table class="Button" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
So how do i make it a link/button?
You can use onclick and redirect your page.
Or wrap your table with <a>
<table class="Button" onclick="location.href='yourpage.html'" >
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
The same way as anything else.
You put an <a> element (with an href attribute) around it.
Wrap it into a link element:
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
</a>
And if you wanna have a button, add a button element to that:
<button style="color:black; background-color:white; border-radius:5px;">
<a href="LINK.html">
<table>
<tr>
<td class="parameter"> Temperature</td>
</tr>
<tr>
<td class="Value">23℃</td>
</tr>
<tr>
<td class="Target">Target: 30℃ </td>
</tr>
</table>
</a>
</button>
You can do it using javascript onClick event or put <a> tag around it
Html
<table class="button" onClick="linkTo('https://www.google.com')">
.
.
.
</table>
Java Script
<script>
function linkTo(var link){
window.location = link;
}
</script>
Css for mouse point
<style>
table.button{
cursor: pointer;
}
</style>
I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.
Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?
For example if I had this table:
<table>
<thead>
<tr>
<th class="head1">Head 1</th>
<th class="head2">Head 2</th>
<th class="head2">Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
The head1 and col1 would always be shown with the other columns scrollable.
This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.
<div class="table-container">
<div class="left">
<table>
...
</table>
</div>
<div class="right">
<table>
...
</table>
</div>
</div>
.table-container {
position: relative;
width: 600px;
height: 100%;
display: inline-block;
}
table {
float: left;
}
.right {
overflow: auto;
}
<table >
<tr>
<th>abc</th>
<th>xyz</th>
</tr>
<tr>
<td colspan="2">
<div style="height:50px; overflow:scroll;">
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Please check it. It may be work.
Is it possible to create a table with different number of cells in each and every row with the same width and height ..?? If so how it can be done in a simpler way ..???
Note:
Row width and height are same
Cell width differs in each and every row
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
This is what i have tried using coll span ..Here let's say first row cells width is 30px,30px,30px . if i use coll span , it will be like 60px,30px but i want it as 50px,40px with only 2 cells
I want like this
You can use colspan to create cells that span multiple columns.
jsFiddle
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
If you want all to be the same width and height but only have the number of cells differ you can just not style certain cells in the <table>.
jsFiddle
<table>
<tr>
<td class="content"> </td>
<td></td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td></td>
</tr>
<tr>
<td class="content"> </td>
<td class="content"> </td>
<td class="content"> </td>
</tr>
</table>
Update
Your update with the image, yes you can accomplish this using colspan:
jsFiddle
<table>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
This uses four columns, the middle two are smaller than the others, here is an image that illustrates how the columns are set up:
Update #2
Here is an example of more randomly sizes cells. The first row 10%, 90% and the second row 55%, 45%.
jsFiddle
HTML
<table>
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
CSS
table {
width:100px;
}
td {
border: 1px solid #000;
height:1em;
}
tr:first-child td:first-child {
width:10%;
}
tr:first-child td:last-child {
width:90%;
}
tr:last-child td:first-child {
width:55%;
}
tr:last-child td:last-child {
width:45%;
}
Yes you can, with the colspan attribute for table cells, like this:
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td colspan="5">2</td>
</tr>
<tr>
<td colspan="2">1</td>
<td>2</td>
<td colspan="2">3</td>
<td>4</td>
</tr>
</table>
Working example: http://jsfiddle.net/sk5cB/
Not positive that this is what you're looking for, but you could create a table with merged cells by using the colspan attribute in your <td> tags.
HTML colspan Attribute
You may also use and create a table in
<tr> </tr> tags
If you intend to insert content in those cells and prefer to maintain the same cell width then it is impossible using only tables. I've searched for solutions on this problem as well, it looks great when the cells are empty like Daniel Imms presented in his example, but if you add content to those cells their width starts getting bigger and the other cells on the row start getting smaller. Specifying table-layout:fixed doesn't help because then the first row becomes the rule for all following rows.
If you have the possibility to use divs with float left and width in percentage and a clear fix display:table div that wraps them all, just like Bootstrap 3 does in its grid system, then that'll be much more reliable.