I have simple table generated by PHP.
<table border="1" id="control>
<tbody>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr> //Row #3
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</tbody>
</table>
I would like to hide 3rd row when page loads using javascript or css. Is there any way to do this without giving 3rd row ID?
Thank you in advance
with css3 you can use the :nth-child selector
#control tr:nth-child(3)
{
display:none;
}
using jquery its pretty simple, $('#control tr:eq(2)').hide()
Try this
document.getElementsByTagName("tr")[2].style.display = 'none';
Using pure JavaScript (no framework like JQuery etc.) one can do:
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table border="1" id="control">
<tbody>
<tr><td>row1</td></tr>
<tr><td>row2</td></tr>
<tr><td>row3</td></tr>
<tr><td>row4</td></tr>
<tr><td>row5</td></tr>
<tr><td>row6</td></tr>
</tbody>
</table>
<script type="text/javascript">
var tableElm = document.getElementById("control");
var tableChilds = tableElm.getElementsByTagName("tr");
var row3 = tableChilds[2];
row3.style.display = "none";
// alternatively:
//row3.style.visibility = "hidden";
</script>
</body>
</html>
Use jQuery's eq(int) to select the row at the zero-based index:
$("#control tr").eq(2).hide();
Related
I am trying to add a span after dynamically generated table, but the span is getting added before the contents of table are getting loaded.
Below is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
The span is getting added before hello. I want the span to be displayed after the table contents.
The span is being added at the bottom in the dom. You are seeing it before the table because the table is aligned right.Try the following:
$(document).ready(function(){
dash();
$("button").click(function(){
$("#th").append("<span>span</span><br/>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" >
<tr><td>hello</td></tr>
</table>
<br/>
</div>
</body>
</html>
you write something like this $("#hu").after("<span>span</span>");
this will put span after table
Use jQuery after function like the way #Reoxey did. However, please ensure you're adding your script before the </body> tag instead of using it on the <head> tag. Adding Javascript before the </body> tag is recommended to prevents render blocking while the scripts load and is much better for site perception head. Adding Javascript before the </body> tag will also improve the site loading speed.
Hey Manu try this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").append("<span>span</span>");
});
});
function dash()
{
$("#hu").html();
$("#hu").append("<tr> <td> see this </td> </tr>");
}
</script>
</head>
<body>
<button>Insert content after each p element</button>
<div align="right" id="th">
<table id="hu" align="right">
<tr><td>hello</td></tr>
</table>
</div>
</body>
</html>
You should use table id i.e #hu to append as place of #th
Hope this helps. :)
Just change:
$("#th").append("<span>span</span>");
to:
$("table").append("<span>span</span>");
JS Fiddle: http://jsfiddle.net/tk4h80yn/
This will help you
$(document).ready(function(){
dash();
$("button").click(function(){
$("#hu").after("<span>span</span>");
});
});
I am trying attribute a event to cells of differents columns of my bootstrap table.
The problem is: Although I have set a class to each column, the events attributed to this classes are not fired. I still tried set a class to each div added in cells, but its event also wasn't fired.
So, how can I get a td event using bootstrab table?
Here is the complete code for td click event for bootstap table
$(document).ready(function(){
$('table td').click(function(){
alert($(this).html());
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>Click on the td below</p>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Until you are showing us some code, you can try this,
$('body').on('click', '#tableID tr td', function(){
//whenever any td is clicked, this function will get called
});
you can change 'click' with whatever event name you want to bind your td with.
I am delegating the event to body, because if you dynamically add your table elements to your html, direct binding to those events will not fire/work.
try This
$("#boottable").on('all.bs.table', function (e, name, args) {
console.log(name, args);
});
I am trying to have my table rows work as links. I have found a few answers on SO that show how to do it, but for some reason my code is not working. Could anyone help me find what is causing it to not work? Thanks.
I have tried looking at
Making a table row (tr) clickable with jQuery (with an a href link, and hover!?)
and
how to get selected table row values using jquery?
so far.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>X</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
tr {
margin:2px;
padding:10px;
display:block;
background:#EEE;
cursor:pointer;
}
tr:hover {
background:#BBB;
}
</style>
</head>
<body>
<script>
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
</script>
<table class="tbl">
<tr class=clickableRow href="http://www.zombo.com">
<td>2014</td>
<td>ACADIA</td>
<td>SLE-2</td>
</tr><tr class=clickableRow href='http://www.xkcd.com'>
<td>2014</td>
<td>ACADIA</td>
<td>Denali</td>
</tr><tr class=clickableRow href='http://www.legit_url_not_fake_at_all.com'>
<td>2014</td>
<td>ACADIA</td>
....
(SNIP)
Thanks.
Use the Document.ready:
<script>
$(document).ready(function(){
$("tr").click(function() {
window.location.href = $(this).attr("href");
});
});
</script>
I am trying to make an empty grid using angularJS, I am 2 days new to it so I dont know much, this is what makes sense to me:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var app = angular.module('calendar',[]);
app.controller('WeekMakerCtrl', function(){
for(i = 0; i < 12; i++){
this.rows.push("<tr> <tb>1</tb> <tb>2</tb> </tr>");
}
});
</script>
</head>
<body>
<div ng-controller="WeekMakerCtrl as week">
<table>
<p ng-repeat="row in week.rows">{{row}}</p>
</table>
</div>
</body>
</html>
but it doesn't display anything, what is wrong with it?
PS: please don't over complicate an answer, remember that I am a newbie. thanks a lot
The model (rows) should contain data, not markup. The view template (the HTML) should contain the HTML. It should be something like:
this.rows.push({colA: 1, colB: 2})
Then your HTML would look like:
<table>
<tr ng-repeat="row in week.rows">
<td>{{row.colA}}</td>
<td>{{row.colB}}</td>
</tr>
</table>
Per PSL's comment, you may need also to change your ng-app attribute to ng-app="calendar", and you need to initialize this.rows to an empty array in the controller (this.rows = []) before you can .push on it.
I have this js part of script:
jQuery.each(data, function(index, value) {
$("table_div").append("<td>" + value + "</td>");
});
I want use this for create a table with twitter bootstrap. In the html page there is this table element:
<table class="table table-striped" id="table_div">
</table>
But this solution doesn't works. How I have to do? Thank you!
First of all, you're not appending any <tr> elements which are needed in a table, and secondly you're referring to $("table_div") instead of $("#table_div") (the hashtag # means that you're referring to an ID, just like in CSS).
jQuery.each(data, function(index, value) {
$("#table_div").append("<tr><td>" + value + "</td></tr>");
});
Besides referring to the node <table_div> instead of the id #table_div you don't want to append anything to the table node.
You should take a look at this as well as here and here.
You should use tbody when using Twitters Bootstrap anyways for example, like so:
<table id="table_div" class="table table-striped">
<tbody></tbody>
<table>
here the right js
for (i in data) {
$('#table_div > tbody:last').append('<tr><td>'+data[i]+'</td></tr>');
}
For more research look here Add table row in jQuery
Edit:
Ok i wrote you an entire example using twitters bootstrap and jQuery.
This works, if it doesn't for your data array, something is wrong with it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<table class="table table-striped" id="my-table">
<tbody>
</tbody>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
var data = ["foo","bar"];
$(document).ready(function(){
$.each(data, function(i,item){
$('#my-table > tbody:last').append('<tr><td>'+item+'</td></tr>');
});
});
</script>
</body>
</html>