I tried to access the elemnts created by handlebars by clicking on the buttons. but it takes first element it created. Please help me with this one
<body>
<div id="container"></div>
<div>
<table id="cartItem">
<tr>
<th>Product Name</th>
<th>count</th>
<th>Price</th>
<th>Id</th>
</tr>
</table>
</div>
<script type="text/x-handlebars-template" id="demo">
{{#each this}}
<h2 id="name">{{stock_name}}</h2>
<h2 id="id" style="display: none;">{{stock_id}}</h2>
<h4 id="price">{{stock_price}}</h4>
<button class="btn" onclick="placeOrder()"></button>
{{/each}}
</script>
<script src="Asset/js/Handle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars#latest/dist/handlebars.js"></script>
<script src="Asset/js/placeOrder.js"></script>
</body>
Handle.js file contains code below,
var request = new XMLHttpRequest();
request.open('GET', 'http://localhost:8080/api/stocks');
request.onload = function(){
if(request.status>=200 && request.status<400){
var data = JSON.parse(request.responseText);
createHTML(data);
}
else{
console.log("Error from server");
}
};
request.onerror = function(){
console.log("There is an error");
}
request.send();
function createHTML(jsonData){
console.log("testing.......")
console.log(jsonData);
var template = document.getElementById("demo").innerHTML;
var compiledTemplate = Handlebars.compile(template);
var GenerateHTML = compiledTemplate(jsonData);
var container = document.getElementById("container");
container.innerHTML= GenerateHTML;
}
Placeorder.js contains code below
function placeOrder(){
var i_Stocks = document.getElementById("name").textContent;
var i_price = document.getElementById("price").textContent;
var i_Id = document.getElementById("id").textContent;
console.log(i_Stocks);
console.log(i_price);
var table = document.getElementById("cartItem");
var row = table.insertRow(1);
var name = row.insertCell(0);
var count = row.insertCell(1);
var price = row.insertCell(2);
var id = row.insertCell(3);
name.innerHTML = i_Stocks;
price.innerHTML = i_price;
count.innerHTML = 1;
id.innerHTML = i_Id;
}
the Json request returns,
[{"stock_id":"stk0001","stock_name":"popsickle","stock_price":45,"stock_status":"yes"},{"stock_id":"stk0002","stock_name":"icecream","stock_price":66,"stock_status":"yes"},{"stock_id":"stk0003","stock_name":"oreo","stock_price":60,"stock_status":"yes"},{"stock_id":"stk0004","stock_name":"jellyBears","stock_price":40,"stock_status":"yes"},{"stock_id":"stk0005","stock_name":"cakes","stock_price":70,"stock_status":"no"}]
Related
how to make multiple filter in Javascript if I extract data from Google Spreadsheet?
GS Code
var getTable = function(){
var url = "someURL";
var script = SpreadsheetApp.openByUrl(url);
var temp = HtmlService.createTemplateFromFile("table");
var html = temp.evaluate().setWidth(1200).setHeight(600);
SpreadsheetApp.getUi().showModalDialog(html,"Leave Application");
}
var include = function(filename){
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
var getTableData = function(){
var url = "SomeURL";
var script = SpreadsheetApp.openByUrl(url);
var ss = script.getSheetByName("Script");
var data = ss.getRange(2,2,ss.getLastRow()-1,9).getDisplayValues();
return data;
}
HTML CODE :
<head>
<?!= include("table-css");?>
</head>
<body>
<div>
<select id="name">
<option disabled selected>Choose Name</option>
<option>John</option>
<option>Doe</option>
<option>Jane</option>
</select>
<label>Name Selection</label>
</div>
<div class="input-field col s3 right">
<div>
<i id="pending" class="material-icons i1">label_outline</i>
<i id="approve" class="material-icons i2">done_all</i>
<i id="reject" class="material-icons i3">clear</i>
<i id="notify" class="material-icons i4">error</i>
</div>
<div>
<table style="width:100%" id="myTable";>
<thead>
<tr>
<th>Name</th>
<th>Type of Leave</th>
<th>From</th>
<th>Until</th>
<th>Status</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
Javascript code:
document.addEventListener("DOMContentLoaded",function(){
google.script.run.withSuccessHandler(generateTable).getTableData();
});
function generateTable(dataArray){
dataArray.forEach(function(r){
var row = document.createElement("tr");
var col1 = document.createElement("td");
col1.textContent = r[1];
var col2 = document.createElement("td");
col2.textContent = r[2];
row.appendChild(col1);
row.appendChild(col2);
tbody.appendChild(row);
getTableData() is just a function in GS code that return data from spreadsheet.
It will look like this :
then in then I used this to start filter;
name.onchange = function(){
for(var i=1; i<table.rows.length; i++){
if(table.rows[i].cells[0].textContent === this.value){
console.log(table.rows[i].cells[0].textContent);
table.rows[i].style.display = "";
}else{
table.rows[i].style.display = "none";
}
}
}
var pending = document.getElementById("pending");
pending.onclick = function(){
for(var i=1; i<table.rows.length; i++){
if(table.rows[i].cells[4].textContent === "Pending"){
table.rows[i].style.display = "";
}else{
table.rows[i].style.display = "none";
}
}
}
It working fine for single filter but how to combine both so I can filter based on name and status?
I need t ogenerate an HTML table from a json file. The is loading OK, I can see the values in console.log, but I don't get how to pass these values in the other function (generate table function)
Here's my code:
<!DOCTYPE html>
<html lang="fr-CA" dir="ltr">
<head>
<meta charset="utf-8">
<title>Tableau de l'inventaire - API JSON</title>
</head>
<body>
<h2>Voitures en inventaire</h2>
<table id="myTable">
<thead>
<tr>
<th>No Stock</th>
<th>Marque</th>
<th>Modèle</th>
<th>Année</th>
</tr>
</thead>
</table>
<button type="button" onclick="loadTable()">Charge Content</button>
<script type="text/javascript">
// Loading json file = OK
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// JSON.parse(this.responseText);
var i = JSON.parse(this.responseText);
// var x = document.getElementById("myTable").innerHTML = this.responseText
// console.log(jsonObj);
}
};
xhttp.open("GET", "voituresRecords.json", true);
xhttp.send();
}
// Generate table from json data = Not working
function loadTable(loadXMLDoc) {
var x = document.getElementById('myTable');
for(var i = 1; i < array.length; i++) {
var newRow = table.insertRow(table.length);
for(var j = 0; j < array[i].length; j++) {
var cell = newRow.insertCell(j);
cell.innerHTML = array[i][j];
}
}
}
</script>
</body>
</html>
And here's the json data from file:
[{"no_stock":"AC5678","marque":"Hyundai","modele":"Accent","annee":"2006"},
{"no_stock":"EL5320","marque":"Hyundai","modele":"Elantra","annee":"2018"},
{"no_stock":"KO4301","marque":"Hyundai","modele":"Kona","annee":"2018"},
{"no_stock":"TO4210","marque":"Hyundai","modele":"Tucson","annee":"2017"}]
Thanks for any help!
could be very more easy with a fetch : https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Your code should that way
<h2>Voitures en inventaire</h2>
<table id="myTable">
<thead>
<tr>
<th>No Stock</th>
<th>Marque</th>
<th>Modèle</th>
<th>Année</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button type="button" onclick="loadTable()">Charge Content</button>
const myTableBody = document.querySelector('#myTable tbody')
function loadTable() {
fetch('voituresRecords.json')
.then(resp => resp.json())
.then(data => {
data.forEach( info=>{
let newRow = myTableBody.insertRow()
newRow.insertCell().textContent = info.no_stock
newRow.insertCell().textContent = info.marque
newRow.insertCell().textContent = info.modele
newRow.insertCell().textContent = info.annee
})
})
.catch(error => console.error(error))
}
ow can I display images via url and it increments?
My table increments every time new data is stored. But how can I display image to my table?
The table already display the url I'm trying to display the image via url.
this is the output of my table https://firebasestorage.googleapis.com/v0/b/sad-police-app.appspot.com/o/October 21 16:9:15?alt=media&token=14866e4f-7a7b-4f11-a057-106313770861
<html>
<head>
<title>Firebase Realtime Database Web</title>
<script src="https://www.gstatic.com/firebasejs/5.5.1/firebase.js">
</script>
<script>
// Initialize Firebase
</script>
</head>
<body>
<div class="tablehead">
<h1>POLICE STATION 3</h1>
<table id="reports" border="1">
<tr>
<th>Case ID</th>
<th>Email Address</th>
<th>Caption</th>
<th>Location</th>
<th>Time</th>
<th>Picture</th>
</tr>
<tbody id="reportbody"></tbody>
</table>
</div>
<script>
var tblUsers = document.getElementById('reportbody');
var databaseRef = firebase.database().ref('PP3/');
var rowIndex = 1;
databaseRef.on('value', function(snapshot) {
tblUsers.innerHTML = '';
snapshot.forEach(function(childSnapshot) {
var childKey = childSnapshot.key;
var childData = childSnapshot.val();
var row = tblUsers.insertRow(0);
var ccase= row.insertCell(0);
var email = row.insertCell(1);
var caption = row.insertCell(2);
var location = row.insertCell(3);
var time = row.insertCell(4);
var picture = row.insertCell(5);
ccase.appendChild(document.createTextNode(childData.CaseID.replace(/"/g, '')));
email.appendChild(document.createTextNode(childData.Email.replace(/"/g, '' )));
caption.appendChild(document.createTextNode(childData.Caption.replace(/\\/g, '').replace(/"/g, '')));
location.appendChild(document.createTextNode(childData.Location.replace(/\\/g, '').replace(/"/g, '')));
time.appendChild(document.createTextNode(childData.Time.replace(/"/g, '')));
picture.appendChild(document.createTextNode(childData.Picture.replace(/\\/g, '').replace(/"/g, '')));
rowIndex = rowIndex + 1;
});
});
</script>
</body>
</html>
Try this: SomeNode.appendChild(`<img src=${url}>`)
I have a html and javascript program where in I want to upon new queue of data the table will get cleared empty while retaining the first cell row that contains the content names of the table. How can I make it possible Here is my
<script>
function showAdTool(option){
var readData = document.getElementById('readData');
var addData = document.getElementById('addData');
var editData = document.getElementById('editData');
var deleteData = document.getElementById('deleteData');
if(option == '0'){
readData.style.display = 'inline';
addData.style.display = 'none';
editData.style.display = 'none';
deleteData.style.display = 'none';
}else if (option == '1'){
readData.style.display = 'none';
addData.style.display = 'inline';
editData.style.display = 'none';
deleteData.style.display = 'none';
}else if (option == '2'){
readData.style.display = 'none';
addData.style.display = 'none';
editData.style.display = 'inline';
deleteData.style.display = 'none';
}else{
readData.style.display = 'none';
addData.style.display = 'none';
editData.style.display = 'none';
deleteData.style.display = 'inline';
}
}
function dbOutputSelect(){
var option = document.getElementById('dbselector');
var dbvalue = document.getElementById('dbvalue');
if (option.value == '0'){
dbvalue.style.display = 'none';
}
else if (option.value == '1'){
dbvalue.style.display = 'inline';
}else if (option.value == '2'){
dbvalue.style.display = 'inline';
}else if (option.value == '3'){
dbvalue.style.display = 'inline';
}else if (option.value == '4'){
dbvalue.style.display = 'inline';
}else{
dbvalue.style.display = 'inline';
}
}
function ajaxRequest(){
clearTables();
var option = document.getElementById('dbselector').value;
var content = document.getElementById('contentholder').value;
var date = new Date();
var request= (date.getMonth()+1) + (date.getFullYear()) + (date.getHours()) + (date.getMinutes()) + (date.getSeconds()) + parseInt(((Math.random()*1000000)));
var url = './designIncludes/phpLogicIncludes/showdbcontent.php?option='+ option + '&content=' + content + '&request=' + request ;
downloadUrl(url,function(data){
var xml = parseXml(data);
var markerNodes = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markerNodes.length; i++){
var name = markerNodes[i].getAttribute("name");
var address = markerNodes[i].getAttribute("address");
var info = markerNodes[i].getAttribute("info");
var budget = markerNodes[i].getAttribute("budget");
var tts = markerNodes[i].getAttribute("tts");
var type = markerNodes[i].getAttribute("type");
createTables(i,name,address,info,budget,tts,type);
}
});
}
function clearTables(){
}
function createTables(i,name,address,info,budget,tts,type){
var table = document.getElementById('tableDataContent');
var row = table.insertRow(-1);
var idCell = row.insertCell(0);
var nameCell = row.insertCell(1);
var addCell = row.insertCell(2);
var infoCell = row.insertCell(3);
var budgetCell = row.insertCell(4);
var ttsCell = row.insertCell(5);
var typeCell = row.insertCell(6);
idCell.innerHTML = i;
nameCell.innerHTML = name;
addCell.innerHTML = address;
infoCell.innerHTML = info;
budgetCell.innerHTML = budget;
ttsCell.innerHTML = tts;
typeCell.innerHTML = type;
}
function downloadUrl(url, callback){
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback (request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function parseXml(str) {
if (window.ActiveXObject){
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}else if (window.DOMParser){
return (new DOMParser).parseFromString(str, 'text/xml');
}
}
function doNothing() {}
</script>
and here is my
<!DOCTYPE html>
<html lang="en">
<head>
<body>
<div id="MainContent">
</div>
<hr>
<div id="adminPanel">
<p>Administrator Tools:</p>
<p>Read Database Content | Add Data | Edit Data | Delete Data</p>
<div id="adminPanelContent">
<div id="readData">
<form>
Show Database data by: <select id="dbselector" onchange = "dbOutputSelect();">
<option value = '0'>All Data</option>
<option value = '1'>By Name</option>
<option value = '2'>By Address</option>
<option value = '3'>Budget</option>
<option value = '4'>Time to spend</option>
<option value = '5'>Marker Type</option>
</select>
<p id="dbvalue" style="display:none;"> Content: <input type="text" size="16" id="contentholder"></p>
<input type="button" value="Submit" onclick="ajaxRequest();">
</form>
<div id="tableData">
<table id="tableDataContent" border="1" widht="100%">
<tr><td>Id No.</td><td>Name</td><td>Address</td><td>Information</td><td>Budget</td><td>Time to Spend</td><td>Site Type</td></tr>
</table>
</div>
</div>
<div id="addData">Mysel</div>
<div id="editData">Myse</div>
<div id="deleteData">Mys</div>
</div>
</div>
</div>
</div>
</body>
</html>
On my table I want to retain the original table content such as Id, name, adress information etc. in my HTML page.
I would recommend using thead and tbody elements in your table.
MDN link
Then you only have to add data to the tbody, and clear the data in the tbody
<table id="tableDataContent">
<thead>
<tr>
<th>Id No.</th>
<th>Name</th>
<th>Address</th>
<th>Information</th>
<th>Budget</th>
<th>Time to Spend</th>
<th>Site Type</th>
</tr>
</thead>
<tbody>
<!-- Table Data -->
</tbody>
</table>
Try something like this:
while(table.rows.length > 1){
table.rows[1].parentElement.removeChild(table.rows[1]);
}
I've been messing with manipulating HTML tables for the past few weeks and I've come across a problem I am not sure how to fix. So the collection of rows for a table can be iterated over like an array, but if you've switched out the rows a lot, won't the IDs be mixed and doesn't the browser rely on the IDs as the way to iterate over the row objects? I'm running into a problem (probably due to a lack of understanding) where the rows eventually stop moving or one row gets duplicated on top of another. Should I somehow be updating the row's ID each time it is moved? Here is my source so far for this function.
function swap(rOne, rTwo, tblID) {
tblID.rows[rOne].setAttribute('style', 'background-color:#FFFFFF');
var tBody = tblID.children[0];
var rowOne;
var rowTwo;
if (rOne > rTwo) {
rowOne = rOne;
rowTwo = rTwo;
}
else {
rowOne = rTwo;
rowTwo = rOne;
}
var swapTempOne = tblID.rows[rowOne].cloneNode(true);
var swapTempTwo = tblID.rows[rowTwo].cloneNode(true);
hiddenTable.appendChild(swapTempOne);
hiddenTable.appendChild(swapTempTwo);
tblID.deleteRow(rowOne);
var rowOneInsert = tblID.insertRow(rowOne);
var rowOneCellZero = rowOneInsert.insertCell(0);
var rowOneCellOne = rowOneInsert.insertCell(1);
var rowOneCellTwo = rowOneInsert.insertCell(2);
var rowOneCellThree = rowOneInsert.insertCell(3);
rowOneCellZero.innerHTML = hiddenTable.rows[2].cells[0].innerHTML;
rowOneCellOne.innerHTML = hiddenTable.rows[2].cells[1].innerHTML;
rowOneCellTwo.innerHTML = hiddenTable.rows[2].cells[2].innerHTML;
rowOneCellThree.innerHTML = hiddenTable.rows[2].cells[3].innerHTML;
tblID.deleteRow(rowTwo);
var rowTwoInsert = tblID.insertRow(rowTwo);
var rowTwoCellZero = rowTwoInsert.insertCell(0);
var rowTwoCellOne = rowTwoInsert.insertCell(1);
var rowTwoCellTwo = rowTwoInsert.insertCell(2);
var rowTwoCellThree = rowTwoInsert.insertCell(3);
rowTwoCellZero.innerHTML = hiddenTable.rows[1].cells[0].innerHTML;
rowTwoCellOne.innerHTML = hiddenTable.rows[1].cells[1].innerHTML;
rowTwoCellTwo.innerHTML = hiddenTable.rows[1].cells[2].innerHTML;
rowTwoCellThree.innerHTML = hiddenTable.rows[1].cells[3].innerHTML;
tblID.rows[rowOne].setAttribute('onclick', 'chkThis(event, this)');
tblID.rows[rowTwo].setAttribute('onclick', 'chkThis(event, this)');
for (iHiddenDelete = 2; iHiddenDelete >= 1; iHiddenDelete--) {
hiddenTable.deleteRow(iHiddenDelete);
}
}
EDIT: Adding HTML for page and the function for moving between tables which I suspect is causing the issue.
<body>
<form>
<input value="0" type="text" id="cubesum" size="5"/>
<input value="0" type="text" id="wgtsum" size="5"/>
</form>
<form>
<table id="tblSource">
<thead>
<tr>
<th> </th>
<th>Order</th>
<th>Cube</th>
<th>Weight</th>
<th>Move</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="button" onclick="move('tblSource','tblTarget')" style="width: 58px">To Trucks (Down)</button>
<button type="button" onclick="move('tblTarget', 'tblSource')" style="width: 58px">To Orders (Up)</button>
</form>
<form>
<table id="tblTarget">
<thead>
<tr>
<th> </th>
<th>Order</th>
<th>Cube</th>
<th>Weight</th>
<th>Move</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<table id="hiddenTable" style="display: none"> <!--this table is hidden! -->
<thead>
<tr>
<th> </th>
<th>Order</th>
<th>Cube</th>
<th>Weight</th>
<th>Move</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
FUNCTION STARTS HERE
function move(from, to) {
var frTbl = document.getElementById(from);
var toTbl = document.getElementById(to);
chkArray.length = 0;
cbsMove = frTbl.getElementsByTagName('input');
for (var oChk = 0; oChk < cbsMove.length; oChk++) {
if (cbsMove[oChk].type == 'checkbox') {
if (cbsMove[oChk].checked == true) {
var prntRow = cbsMove[oChk].parentNode.parentNode;
var prntRowIdx = prntRow.rowIndex;
chkArray.push(prntRowIdx);
cbsMove[oChk].checked = false;
}
}
}
for (iMove = chkArray.length -1; iMove >= 0; iMove--) {
var num = chkArray[iMove];
var row = frTbl.rows[num];
var cln = row.cloneNode(true);
toTbl.appendChild(cln);
frTbl.deleteRow(num);
}
sum();
}
So it turns out that my row cloning for moving between tables was causing malformed HTML where the rows would not longer be inside the table body tags. In addition, not trusting the browser to keep track of the button IDs and using the button IDs to setAttributes to the button also caused button ID overlap eventually. So, I got rid of the node cloning and did the row moving between tables the manual way and used innerHTML to add the function call inside the buttons. Upon further reflection, I've come to learn that some people actually make functions that handle ALL button clicks without calling them inside the button and route them to the proper function depending on the ID or other factors such as parent nodes of the button. Perhaps that is best. The main trick here is to STICK TO ONE METHOD. I was all over the place in how I manipulated the tables and it broke things. Here is the working source for those looking to do similar things.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<style type="text/css">
#selectSource {
width: 320px;
}
#selectTarget {
width: 320px;
}
table, th, td
{
border: 1px solid black;
}
</style>
<title>Loader</title>
<script>
var chkArray = [];
var data = [];
var tmpArray = [];
var iChk = 0;
var swap;
window.onload = function () {
var load = document.getElementById('selectSource')
loadFromAJAX();
}
function loadFromAJAX()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var rawData = xmlhttp.responseText;
data = JSON.parse(rawData);
for (iData = 0; iData < data.length; iData++) {
newRow = document.getElementById('tblSource').insertRow(iData + 1);
var dn = "dn" + (iData + 1);
var up = "up" + (iData + 1);
cel0 = newRow.insertCell(0);
cel1 = newRow.insertCell(1);
cel2 = newRow.insertCell(2);
cel3 = newRow.insertCell(3);
cel4 = newRow.insertCell(4);
cel0.innerHTML = "<input type='checkbox' name='chkbox'>";
cel1.innerHTML = data[iData].num;
cel2.innerHTML = data[iData].cube;
cel3.innerHTML = data[iData].wgt;
cel4.innerHTML = "<button type='button' onclick=moveUp(this)>up</button><button type='button' onclick=moveDn(this)>down</button>";
}
}
}
xmlhttp.open("POST","http://192.168.3.2/cgi-bin/rims50.cgi/json.p",true);
xmlhttp.send();
}
function moveUp(mvThisRow) {
var mvThisRowRow = mvThisRow.parentNode.parentNode;
var mvThisRowTbl = mvThisRowRow.parentNode.parentNode;
var mvThisRowIndex = mvThisRowRow.rowIndex;
var mvThisRowTblLngth = mvThisRowTbl.rows.length;
var mvFrRow = mvThisRowTbl.rows[mvThisRowIndex];
var mvToRow = mvThisRowIndex - 1;
var mvThisDn = "dn" + (mvToRow) + mvThisRowTbl;
var mvThisUp = "up" + (mvToRow) + mvThisRowTbl;
if (mvThisRowIndex - 1 !== 0) {
moveToRow = mvThisRowTbl.insertRow(mvToRow);
mvRowCel0 = moveToRow.insertCell(0);
mvRowCel1 = moveToRow.insertCell(1);
mvRowCel2 = moveToRow.insertCell(2);
mvRowCel3 = moveToRow.insertCell(3);
mvRowCel4 = moveToRow.insertCell(4);
mvRowCel0.innerHTML = "<input type='checkbox' name='chkbox'>";
mvRowCel1.innerHTML = mvFrRow.cells[1].innerHTML;
mvRowCel2.innerHTML = mvFrRow.cells[2].innerHTML;
mvRowCel3.innerHTML = mvFrRow.cells[3].innerHTML;
mvRowCel4.innerHTML = "<button type='button' onclick=moveUp(this)>up</button><button type='button' onclick=moveDn(this)>down</button>";
mvThisRowTbl.deleteRow(mvThisRowIndex +1);
}
else {
alert("You can't move the top row 'up' try moving it 'down'.");
}
}
function moveDn(mvThisRow) {
var mvThisRowRow = mvThisRow.parentNode.parentNode;
var mvThisRowTbl = mvThisRowRow.parentNode.parentNode;
var mvThisRowTblLngth = mvThisRowTbl.rows.length;
var mvThisRowIndex = mvThisRowRow.rowIndex;
if (mvThisRowIndex + 1 !== mvThisRowTblLngth) {
var mvFrRow = mvThisRowTbl.rows[mvThisRowIndex];
var mvToRow = mvThisRowIndex + 2;
var moveToRow = mvThisRowTbl.insertRow(mvToRow);
var dn = "dn" + (mvToRow) + mvThisRowTbl;
var up = "up" + (mvToRow) + mvThisRowTbl;
mvRowCel0 = moveToRow.insertCell(0);
mvRowCel1 = moveToRow.insertCell(1);
mvRowCel2 = moveToRow.insertCell(2);
mvRowCel3 = moveToRow.insertCell(3);
mvRowCel4 = moveToRow.insertCell(4);
mvRowCel0.innerHTML = "<input type='checkbox' name='chkbox'>";
mvRowCel1.innerHTML = mvFrRow.cells[1].innerHTML;
mvRowCel2.innerHTML = mvFrRow.cells[2].innerHTML;
mvRowCel3.innerHTML = mvFrRow.cells[3].innerHTML;
mvRowCel4.innerHTML = "<button type='button' onclick=moveUp(this)>up</button><button type='button' onclick=moveDn(this)>down</button>";
mvThisRowTbl.deleteRow(mvThisRowIndex);
}
else {
alert("You can't move the bottom row 'down' try moving it 'up'.");
}
}
function sum() {
var trgTbl = document.getElementById('tblTarget');
var tblLength = trgTbl.rows.length;
var sumAddCube = 0;
var sumAddWgt = 0;
document.getElementById("cubesum").setAttribute("value", sumAddCube);
document.getElementById("wgtsum").setAttribute("value", sumAddWgt);
for (iSum = 1; iSum < tblLength; iSum++) {
celCubeNum = trgTbl.rows[iSum].cells[2].innerHTML;
celWgtNum = trgTbl.rows[iSum].cells[3].innerHTML;
sumAddCube = parseInt(sumAddCube) + parseInt(celCubeNum);
sumAddWgt = parseInt(sumAddWgt) + parseInt(celWgtNum);
}
document.getElementById("cubesum").setAttribute("value", sumAddCube);
document.getElementById("wgtsum").setAttribute("value", sumAddWgt);
}
function move(from, to) {
var frTbl = document.getElementById(from);
var toTbl = document.getElementById(to);
chkArray.length = 0;
cbsMove = frTbl.getElementsByTagName('input');
for (var oChk = 0; oChk < cbsMove.length; oChk++) {
if (cbsMove[oChk].type == 'checkbox') {
if (cbsMove[oChk].checked == true) {
var prntRow = cbsMove[oChk].parentNode.parentNode;
var prntRowIdx = prntRow.rowIndex;
chkArray.push(prntRowIdx);
cbsMove[oChk].checked = false;
}
}
}
for (iMove = chkArray.length -1; iMove >= 0; iMove--) {
var num = chkArray[iMove];
var row = frTbl.rows[num];
var toRow = toTbl.rows.length
moveRow = toTbl.insertRow(toRow);
var dn = "dn" + (toRow) + toTbl;
var up = "up" + (toRow) + toTbl;
mvCel0 = moveRow.insertCell(0);
mvCel1 = moveRow.insertCell(1);
mvCel2 = moveRow.insertCell(2);
mvCel3 = moveRow.insertCell(3);
mvCel4 = moveRow.insertCell(4);
mvCel0.innerHTML = "<input type='checkbox' name='chkbox'>";
mvCel1.innerHTML = row.cells[1].innerHTML;
mvCel2.innerHTML = row.cells[2].innerHTML;
mvCel3.innerHTML = row.cells[3].innerHTML;
mvCel4.innerHTML = "<button type='button' onclick=moveUp(this)>up</button><button type='button' onclick=moveDn(this)>down</button>";
frTbl.deleteRow(num);
}
sum();
}
</script>
</head>
<body>
<form>
<input value="0" type="text" id="cubesum" size="5"/>
<input value="0" type="text" id="wgtsum" size="5"/>
</form>
<form>
<table id="tblSource">
<thead>
<tr>
<th> </th>
<th>Order</th>
<th>Cube</th>
<th>Weight</th>
<th>Move</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button type="button" onclick="move('tblSource','tblTarget')" style="width: 58px">To Trucks (Down)</button>
<button type="button" onclick="move('tblTarget', 'tblSource')" style="width: 58px">To Orders (Up)</button>
</form>
<form>
<table id="tblTarget">
<thead>
<tr>
<th> </th>
<th>Order</th>
<th>Cube</th>
<th>Weight</th>
<th>Move</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<table id="hiddenTable" style="display: none"> <!--this table is hidden! -->
<thead>
<tr>
<th> </th>
<th>Order</th>
<th>Cube</th>
<th>Weight</th>
<th>Move</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>