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>
Related
Hello guys can you help me solve this? I have 2 different modal on the same page. The first modal shows search and filter
but the other modals cannot show anything, only the content
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
$('.modal-child').on('show.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 0);
});
$('.modal-child').on('hidden.bs.modal', function () {
var modalParent = $(this).attr('data-modal-parent');
$(modalParent).css('opacity', 1);
});
} );
</script>
The first modal you are using $('#example').DataTable();
The second modal you are not using $('#second').DataTable();
So, you must add for the second modal.
The tables should have different id. For example:
<script type="text/javascript">
$(document).ready(function() {
$('#table1').DataTable();
$('#table2').DataTable();
});
</script>
...
<table id="table1" class="display" cellspacing="0" width="100%">
...
<table id="table2" class="display" cellspacing="0" width="100%">
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();
So I'm just trying to get a message box to pop up when I click a cell in my table. I have seen many threads about $("td").click(function () { etc, but these are not working for my table. I cannot find out why.
HTML:
<body>
<div id="tableArea">
<table class="table table-bordered" id="myTable">
<tr>
<td bgcolor="green" id='a1'>1</td><td>2</td>
</tr>
</table>
</div>
</body>
And the javascript/jQuery:
<script type="text/javascript">
$("td").click(function(e) {
alert('Anything');
});
</script>
I do not see a difference in this code than in many of the other threads, but this is not working. Note: I'm using Bootstrap, if that makes a difference.
You should capture the click event after $(document).ready().
<script type="text/javascript">
$(document).ready(function() {
$("td").click(function(e) {
alert('Anything');
});
});
</script>
$(document).ready( function(){
$("td").on('click', function(e) {
alert('Anything');
});
});
just work fine for your markup.
see it on jsfiddle
I have following code:
<body onload="LoadData()">
<table id="myTable">
</table>
</body>
And I have Javascript function like :
<script type="text/javascript">
function LoadData()
{
var sTempTableRow='<tr><td>cell-1 </td><td>cell-2 </td><td>cell-3 </td><td>cell-4 </td></tr>'
$('#myTable').append(sTempTableRow);
}
</script>
I have tried numerous times and at all the times face an exception like Microsoft JScript runtime error: Object expected.
Please tell me what is the problem here.
Instead if the onload event use jquery's ready:
<script type="text/javascript">
$(document).ready(function()
{
var sTempTableRow='<tr><td>cell-1 </td><td>cell-2 </td><td>cell-3 </td><td>cell-4 </td></tr>';
$('#myTable').append(sTempTableRow);
});
</script>
<body>
<table id="myTable">
</table>
</body>
you can find the solution :
$(document).ready(function(){
var sTempTableRow='<tr><td>cell-1 </td><td>cell-2 </td><td>cell-3 </td><td>cell-4 </td></tr>'
$('#myTable').append(sTempTableRow);
});
and remove the onload statement.
You can find the solution here.
I am parsing an XML file into a table and want to use the jquery tablesorter. I've tried many things, of which none have worked. I was parsing the XML file first via AJAX and then calling tablesorter on my table. The way I have my code now, I'm calling tablesorter on my table, running AJAX, and then updating the table with $("#table).trigger("update"). I am getting this error no matter whether I have it the first way or the second way: "$(#table).tablesorter() is not a function". Any ideas? Code is listed below for JS and HTML.
HTML:
<html>
<head>
<title>Read XML</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-latest.js"</script>
<script type="text/javascript" src="jquery.tablesorter.js"</script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<table id="table" border="1">
<thead>
<tr>
<th>Item #</th>
<th>Shape</th>
<th>Weight</th>
<th>Color</th>
<th>Clarity</th>
<th>Price($)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
JS:
$(document).ready(function() {
$("#table").tablesorter();
$.ajax({
type: "GET",
url: "tutorial.xml",
dataType: "xml",
success: parseXml
});
$("#table").trigger("update");
});
function parseXml(xml)
{
$(xml).find("diamond").each(function()
{
$("#table tbody").after("<tr><td>" + $(this).find("id").text() +
"</td><td>" + $(this).find("shape").text() + "</td><td>" + $(this).find("weight").text() +
"</td><td>" + $(this).find("color").text() + "</td><td>" + $(this).find("clarity").text() +
"</td><td>" + $(this).find("price").text() + "</td></tr>");
});
}
You are missing a closing >
<script type="text/javascript" src="jquery.tablesorter.js"</script>
should be
<script type="text/javascript" src="jquery.tablesorter.js"></script>
Edit:
As Marek Karbarz points out below, you're also missing a closing > on this line:
<script type="text/javascript" src="jquery-latest.js"</script>
Not sure why you're including jQuery twice, however.