I have a table with 20 lines, and I wanted their rows to go up (skipping the first row line) after 1 minute the page has loaded.
Ex:
Initial
row1
row2
row3
First steo
row2
row3
row1
second state
row3
row1
row2
Final step
row1
row2
row3
I was doing something like this, but I don't know how to replace the content of the rows.
And if possible do it slowly (gradual would be great but now essencial)
function roll()
{
var oRows = document.getElementById('ultNot').getElementsByTagName('tr');
var iRowCount = oRows.length;
//repeat this iRowCount-1?
for (i=iRowCount; i=2;;i--){
var tempRow= oRows[i];
var origRow;
if (i=rowCount) {
origRow=oRows[1];
} else {
origRow=cRows[i-1];
}
var tempContent=origRow;
//replace the contents of the rows
}
}
thanks a lot for any help
Thanks Razvan, that did the trick. The whole code to do what I wanted (which is to roll the complete group of rows 1 time after 40 seconds):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<table id="ultNot" style="border: 1">
<tbody>
<tr>
<td>First row</td>
</tr>
<tr>
<td>Second row</td>
</tr>
<tr>
<td>Third row</td>
</tr>
<tr>
<td>Fourth row</td>
</tr>
<tr>
<td>Fifth row</td>
</tr>
</tbody>
</table>
<input type="button" onclick="iniciaScroll()" value="Click" />
<script type="text/javascript">
window.setTimeout(function() {
iniciaScroll();
;
}, 40000);
</script>
<script type="text/javascript">
var interval;
var cont = 0;
var sizeTable = document.getElementById('ultNot').rows.length;
function roll() {
var table = document.getElementById('ultNot');
var rows = table.rows;
var firstRow = rows[1];
var clone = firstRow.cloneNode(true);
table.tBodies[0].appendChild(clone);
table.tBodies[0].removeChild(firstRow);
cont++;
if (cont == (sizeTable - 1)) {
clearInterval(interval);
cont = 0;
}
}
function iniciaScroll() {
interval = window.setInterval(function() {
roll();
}, 3000);
}
</script>
<!-- end: portal_latestthreads -->
</body>
</html>
There probably is a better way but this is all I could come up with until now :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function roll() {
var table = document.getElementById('myTable');
var rows = table.rows;
var firstRow = rows[0];
var clone = firstRow.cloneNode(true);
table.tBodies[0].appendChild(clone);
table.tBodies[0].removeChild(firstRow);
}
</script>
</head>
<body>
<table id="myTable" style="border: 1">
<tbody>
<tr><td>First row</td></tr>
<tr><td>Second row</td></tr>
<tr><td>Third row</td></tr>
<tr><td>Fourth row</td></tr>
<tr><td>Fifth row</td></tr>
</tbody>
</table>
<input type="button" onclick="roll()" value="Click"/>
</body>
</html>
Related
Data shows in console but cannot display in browser. I almost tried in all browser but same result. row's are creating according to search result but nothing appears inside rows, all rows are blank. Any help will be appreciable.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IMDB</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="imdb.js"></script>
</head>
<body>
<div class="container">
<h1>Search IMDB</h1>
<input type="text" id="movieTitle" class="form-control" placeholder="Ex: Titanic"/>
<button id="searchMovie" class="btn btn-primary btn-block">Search Movie</button>
<table class="table table-striped" id="results">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Rating</th>
<th>Image</th>
</tr>
</thead>
<tbody id="container">
<tr id="template">
<td></td>
<td class="plot"></td>
<td class="rating"></td>
<td><img src="" class="poster"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
imdb.js
(function(){
$(init);
function init(){
$("#searchMovie").click(searchMovie);
var movieTitle = $("#movieTitle");
var tbody = $("#container");
var template = $("#template").clone();
function searchMovie(){
var title = movieTitle.val();
$.ajax({
url: "http://api.myapifilms.com/imdb/idIMDB?title="+title+"&limit=3&token=1ec543f9-d889-4865-8aab-62a2515f24e8",
dataType: "jsonp",
success: renderMoviesWithTemplate
}
);
function renderMoviesWithTemplate(movies){
console.log(movies);
tbody.empty();
for(var m in movies){
var movie = movies[m];
var title = movie.title;
var plot = movie.plot;
var rating = movie.rating;
var posterUrl = movie.urlPoster;
var movieUrl = movie.urlIMDB;
var tr = template.clone();
tr.find(".link")
.attr("href",movieUrl)
.html(title);
tr.find(".plot")
.html(plot);
tr.find(".rating")
.html(rating);
tr.find(".poster")
.attr("src",posterUrl);
tbody.append(tr);
}
}
}
}
})();
So I am using the example code from this link
Select Cells On A Table By Dragging
to build a grid of numbers 1-192 that part works great, but I am curious how would I return the "highlighted" cells to php?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css" media="screen">
table td {
width:50px;
height:50px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
}
table td.highlighted {
background-color:#999;
}
</style>
</head>
<body>
<form action='test.php' method='post'>
<table cellpadding="0" cellspacing="1" id="our_table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
<table>
<tbody>
<tr>
<input type='submit' name='test' value = 'test' />
</tr>
</tbody>
</table>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
var isMouseDown = false;
$("#our_table td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass("highlighted");
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).toggleClass("highlighted");
}
})
.bind("selectstart", function () {
return false; // prevent text selection in IE
});
$(document)
.mouseup(function () {
isMouseDown = false;
});
});
</script>
</body>
** added in the button
This might need some slight modification for your specific case, but it should be pretty close to what you need. I've included comments to indicate what's happening.
// bind a click handler to your button
$("input[name='test']").on("click", function() {
var selectedValues = [];
// iterate through each of the highlighted cells
$(".highlighted").each(function(){
// push the content of the current cell into the array
selectedValues.push($(this).text());
});
// invoke ajax to send the data to your server
$.ajax({
url: "http://yourdomain.com/somepage.php",
method: "GET",
data: {
selectedValues: selectedValues
},
success: function(){
alert("It Worked!");
},
error: function(){
alert("It Didn't Work :(");
}
});
});
I am a beginner and I am trying to write a simple program that calculates a late fee based on a given previous invoice amount/payments. I am stumped in the early portion of this project and basically where I am trying to start is by taking the user inputted values and having them show in my table below, for some reason I cannot figure this out. You can check out what I have so far here: http://176.32.230.9/testingnicoledelarosa.com/
This is the code I have thus far:
<!doctype html>
<html>
<head>
<title>Late Fee Calculator</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function addRow() {
var table= document.getElementByID("results");
var row= document.createElement("tr");
var td1= document.createElement("td");
var td2= document.createElement("td");
var td3= document.createElement("td");
td1.innerHTML = document.getElementByID("invoiceAmount").value;
td2.innerHTML = document.getElementByID("previousBalance").value;
td3.innerHTML = document.getElementByID("paymentAdjustments").value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
table.children[0].appendChild(row);
}
</script>
</head>
<body>
<div>
<form>
Invoice Amount:<br>
<input type="number" id="invoiceAmount">
<br>
<br>
Previous Balance:<br>
<input type="number" id="previousBalance">
<br>
<br>
Payments/Adjustments:<br>
<input type="number" id="paymentAdjustments">
<br>
<br>
<input type="submit" value="Submit" onclick="addRow()">
</form>
</div>
<br>
<div>
<table border="1" id="results">
<tr>
<th>Total Invoice Amount</th>
<td>data</td>
</tr>
<tr>
<th>Previous Balance</th>
<td>data</td>
</tr>
<tr>
<th>Payments/Adjustments</th>
<td>data</td>
</tr>
<tr>
<th>Late Fee</th>
<td>data</td>
</tr>
<tr>
<th>Balance (Amount Due)</th>
<td>data</td>
</tr>
</table>
</div>
</body>
</html>
Well, there are two reasons.
First, the "document.getElementByID" calls should be "document.getElementById" (lower-case d).
But, to prevent your form from actually submitting and reloading the page (and in your case clearing out the data in the table), you could add a 'return false;' at the end of your addRow() function. So it would look like this:
function addRow() {
var table= document.getElementById("results");
var row= document.createElement("tr");
var td1= document.createElement("td");
var td2= document.createElement("td");
var td3= document.createElement("td");
td1.innerHTML = document.getElementById("invoiceAmount").value;
td2.innerHTML = document.getElementById("previousBalance").value;
td3.innerHTML = document.getElementById("paymentAdjustments").value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
table.children[0].appendChild(row);
return false;
}
And your input tag would then look like this:
<input type="submit" value="Submit" onclick="return addRow();">
Hope that helps!
I need the write() function to print a html table using JavaScript,the column names should be First name,Last name and Email sequentially.I can't get the names to print in the table.Don't know what i m doing wrong.Below is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Address Book</title>
<script type="text/javascript">
function addressBookItem (fname, lname, email) {
this.fname= fname;
this.lname = lname;
this.email = email;
}
addressBookItem.prototype.write = function() {
var table=document.getElementById("myTable");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=this.fname;
cell2.innerHTML=this.lname;
cell3.innerHTML=this.email;
}
</script>
</head>
<body>
<script type="text/javascript">
var aB1 = new addressBookItem('Roger', 'Williams', 'rwilliams#gmail.com');
var aB2 = new addressBookItem ('Rose', 'Schultz', 'rose_s#earthlink.net');
aB1.write();
aB2.write();
</script>
<table id="myTable" border="1">
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Email Address</td>
</tr>
</table>
</body>
</html>
I have a jsp which onload calls a js in which a table is created dynamically.
The situation is that I have never worked on jquery earlier, all I know is javascript.
I made two scenarios:
case one : when I create static table on the jsp page itself it works flawlessly.
case two : when I try to load the same table which is created by dynamic javascript it fails.
Case I Working code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/createDynamicTable.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#testTable').dataTable();
});
</script>
</head>
<body>
<div id="tableDataDiv">
<table id="testTable">
<thead>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Case II Not Working code
jsp code
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/createDynamicTable.js"></script>
<script type="text/javascript" src="../js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#testTable').dataTable();
});
</script>
</head>
<body onload="getTableData();">
<div id="tableDataDiv">
</div>
</body>
</html>
js code
function getTableData(){
var tableDataDivObj = document.getElementById("tableDataDiv");
var tableObj = document.createElement("table");
tableObj.id = 'testTable';
// header
var theadObj = document.createElement("thead");
var thObj = document.createElement("th");
thObj.innerHTML = 'h1';
theadObj.appendChild(thObj);
thObj = document.createElement("th");
thObj.innerHTML = 'h2';
theadObj.appendChild(thObj);
thObj = document.createElement("th");
thObj.innerHTML = 'h3';
theadObj.appendChild(thObj);
tableObj.appendChild(theadObj);
// body
var tbodyObj;
var trObj;
var tdObj;
tbodyObj = document.createElement("tbody");
var count = 1;
for(i = 0; i < 3; i++){
trObj = document.createElement("tr");
for(j = 0; j < 3; j++){
tdObj = document.createElement("td");
tdObj.innerHTML = count;
trObj.appendChild(tdObj);
count++;
}
tbodyObj.appendChild(trObj);
}
tableObj.appendChild(tbodyObj);
tableDataDivObj.appendChild(tableObj);
}
Once the table is created dynamically, we append it to the div on the jsp page.
Kindly suggest any modification, suggestions so that I can get this code work.
this is just an example I have created of my real application .
which involves complete mvc, where table data is retrived from the service methods and dao files. I am able to get the data into the table(I made sure after getting an alert on jsp page). I am not able to use datatable on the id of the table.
Thanks in advance!
When your dataTables initialization is run, the table doesn't exist yes. You can fix by moving the $('#testTable').dataTable(); after the table has been initialized.
$(tableObj).dataTable();
at the end of the getTableData function (which should be defined in your $(document).ready callback.
Yon can add datatable to your dynamically created table in javascript.Code is as follows:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
function createTable(){
var myTableDiv = document.getElementById("box");
var table = document.createElement('TABLE');
table.id='tableId'
table.border='1';
var header = table.createTHead();
var row = header.insertRow(0);
var cell = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
cell.innerHTML = "<b>Name</b>";
cell1.innerHTML = "<b>Age</b>";
cell2.innerHTML = "<b>Email</b>";
cell3.innerHTML = "<b>address</b>";
var tableBody = document.createElement('TBODY');
table.appendChild(tableBody);
for (var i=0; i<3; i++){
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (var j=0; j<4; j++){
var td = document.createElement('TD');
td.width='75';
td.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
$("#tableId").dataTable();
}
</head>
<body>
<input type="button" onclick="createTable();" value="CreateTable" /></br>
<div id="box">
</div>
</body>
</html>
Please call jquery method once your table get created by dynamic javascript.
You can find example here how to create dynamically:
http://datatables.net/release-datatables/examples/data_sources/js_array.html