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]);
}
Related
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"}]
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?
So here is my situation; I'm trying to save the data from the table which is added by filling up the form, I don't know how to save this to my database in phpmyadmin using javascript or ajax. A sample code is deeply appreciated. Thanks! PS: I'm a beginner, I'm just scraping the internet for code and trying to make do of what I get. Please Help :D
<html>
<body>
<div class = "inputfield">
<label>First Name:</label>
<input type="text" id="fname"><br>
<label>Last Name:</label>
<input type="text" id="lname"><br>
<label>Gender:</label>
<select name="gender" id="gender">
<option>Male</option>
<option>Female</option>
</select><br>
<label>HOURS:</label>
<input type="number" min=".5" max="12" step=".5" name="hours" id="hours" placeholder="--.5 to 12--"> <br>
</div>
<div class = "tablefield">
<table class="mtable" id="mtable">
<tr>
<th width="27%">First Name</th>
<th width="27%">Last Name</th>
<th width="15%">Gender</th>
<th width="15%">Hour</th>
<th width="16%">Edit</th>
</tr>
</table>
<table class="sumtable">
<tr><b>
<td class="sum">TOTAL HOURS</td>
<td class="sum1" id="sumtd"></td>
</b></tr>
</table>
</div>
<div class="buttons">
<button type = "button" onclick="add1('mtable')">ADD</button>
<button type = "reset" name="reset" class="btnclr">CLEAR</button>
<button type = "button" name="save" onclick="savefunc()">SAVE</button>
</div>
<input type = "hidden" name="hid1" id="hid1">
<input type = "hidden" name="hid2" id="hid2">
<input type = "hidden" name="hid3" id="hid3">
<input type = "hidden" name="hid4" id="hid4">
<script>
var sum = 0;
function add1(){
"use strict";
var hour1 = document.getElementById("hours").value;
sum = parseFloat(sum)+ parseFloat(hour1);
document.getElementById("sumtd").innerHTML = sum;
var table = document.getElementById("mtable"),rindex2;
var rowCount = table.rows.length;
var row = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var element1 = document.createElement("Button");
element1.type = "button";
element1.name = "btnedit";
element1.innerHTML = "Update";
element1.setAttribute('class','btnedit');
var element2 = document.createElement("Button");
element2.type = "button";
element2.name = "btndel";
element2.innerHTML = "Delete";
element2.setAttribute('class','btndel');
for(var i=0; i<rowCount; i++) {
element1.onclick = function () {
try {
rindex2 = this.parentNode.rowIndex;
sum = parseFloat(sum) - parseFloat(table.rows[rindex2].cells[3].innerHTML);
console.log(rindex2);
this.parentNode.cells[0].innerHTML = document.getElementById("fname").value;
this.parentNode.cells[1].innerHTML = document.getElementById("lname").value;
this.parentNode.cells[2].innerHTML = document.getElementById("gender").value;
this.parentNode.cells[3].innerHTML = document.getElementById("hours").value;
sum = parseFloat(sum) + parseFloat(document.getElementById("hours").value);
document.getElementById("sumtd").innerHTML = sum;
}catch(e){
alert(e);
}};
element2.onclick = function () {
try {
rindex2 = this.parentNode.rowIndex;
console.log(rindex2);
sum = parseFloat(sum) - parseFloat(table.rows[rindex2].cells[3].innerHTML);
document.getElementById("sumtd").innerHTML = sum;
table.deleteRow(rindex2);
}catch(e){
alert(e);
}};
}
td1.innerHTML = document.getElementById("fname").value;
td2.innerHTML = document.getElementById("lname").value;
td3.innerHTML = document.getElementById("gender").value;
td4.innerHTML = document.getElementById("hours").value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(element1);
row.appendChild(element2);
table.children[0].appendChild(row);
}
function savefunc(){
var table1 = document.getElementById("mtable");
var hid1 = document.getElementById("hid1").value;
var hid2 = document.getElementById("hid2").value;
var hid3 = document.getElementById("hid3").value;
var hid4 = document.getElementById("hid4").value;
for (var r = 1, n = table1.rows.length; r < n; r++){
var c0 = table1.rows[r].cells[0].innerHTML;
var c1 = table1.rows[r].cells[1].innerHTML;
var c2 = table1.rows[r].cells[2].innerHTML;
var c3 = table1.rows[r].cells[3].innerHTML;
var c4 = table1.rows[r].cells[4].innerHTML;
hid1 = c0;
hid2 = c1;
hid3 = c2;
hid4 = c3;
console.log(hid1);
console.log(hid2);
console.log(hid3);
console.log(hid4);
}
}
</script>
</body>
</html>
I've figure it out. i just include this on the bottom of my loop statement and added a save.php file. Use this as reference https://www.studentstutorial.com/ajax/insert-data
$.ajax({
url: "save.php",
type: "POST",
data: {
fname: hid1,
lname: hid2,
gender: hid3,
hour: hid4
},
cache: false,
success: function(dataResult){
var dataResult = JSON.parse(dataResult);
if(dataResult.statusCode==200){
alert("Save Successful!");
}
else if(dataResult.statusCode==201){
alert("Error occured !");
}
}
});
I have three inputs for the user with date, activity and time. In the date field when the page starts i want the day of the date printet out in the label like this for example: 2015-12-20 and the user can change it if she/he wants.. But i try to make something with a function but cant get it work.
Below is my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="6.1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<form>
Date: <input type="text" id="Datum" name="Date" value=DateTime()>
Activity: <input type="text" id="Activity" name="Activ">
Time: <input type="text" id="time" name="Time">
<input type="button" onclick="AddRow()" value="Lägg till data!">
</form>
<table id="myTable">
<tr>
<td>Datum</td>
<td>Aktivit</td>
<td>Tid</td>
<td>Klar?</td>
</tr>
</table>
<button id="buttonforsend" onclick="SendData()">Skicka grönmarkerad data! </button>
<script>
function DateTime() {
var s = document.getElementById("Datum");
s = "";
var myYear = new Date();
s += myYear.getFullYear() + "-";
s += (myYear.getMonth() + 1) + "-";
s += myYear.getDate();
return s;
}
function AddRow()
{
var $check = document.createElement("INPUT");
$check.setAttribute("type", "checkbox");
$check.setAttribute("checked", "true");
$check.setAttribute("class", "checks");
$check.addEventListener("click", toggleClass);
function toggleClass() {
if (this.checked == true) {
this.parentNode.parentNode.className = "Green";
} else {
this.parentNode.parentNode.className = "Red";
}
}
var date = document.getElementById("Datum");
var activity = document.getElementById("Activity");
var time = document.getElementById("time");
var table = document.getElementById("myTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = date.value;
row.insertCell(1).innerHTML = activity.value;
row.insertCell(2).innerHTML = time.value;
row.insertCell(3).appendChild($check).value;
}
function addTable() {
var myTableDiv = document.getElementById("myDynamicTable");
var table = document.createElement('TABLE');
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.appendChild(document.createTextNode("Cell " + i + "," + j));
tr.appendChild(td);
}
}
myTableDiv.appendChild(table);
}
function CheckData() {
var $arr = [];
var tb = document.getElementById("myTable");
var checks = tb.querySelectorAll(".checks"),
chk, tr;
for (var i = 0; i < checks.length; i++) {
chk = checks[i];
if (chk.checked) {
tr = chk.closest ? chk.closest('tr') : chk.parentNode.parentNode;
$arr.push({
date: tr.cells[0].innerText,
activity: tr.cells[1].innerText,
time: tr.cells[2].innerText
});
}
}
return $arr;
}
function SendData()
{
var obj = {Data: CheckData()};
var jsonString = "jsonString=" + (JSON.stringify(obj));
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","JSON_H.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form- urlencoded");
xmlhttp.setRequestHeader("Content-Length", jsonString.length);
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState === 4 && (xmlhttp.status === 200)){
alert(xmlhttp.responseText);
}
};
xmlhttp.send(jsonString);
}
</script>
</body>
</html>
You need to call DateTime and insert it's value in the input field, setting value=DateTime() won't set the value. For ex:
document.getElementById("Datum").value=DateTime();
Complete Code:
function DateTime() {
var s = document.getElementById("Datum");
s = "";
var myYear = new Date();
s += myYear.getFullYear() + "-";
s += (myYear.getMonth() + 1) + "-";
s += myYear.getDate();
return s;
}
document.getElementById("Datum").value=DateTime(); // This will insert the value
<form>
Date: <input type="text" id="Datum" name="Date" value="">
Activity: <input type="text" id="Activity" name="Activ">
Time: <input type="text" id="time" name="Time">
<input type="button" onclick="AddRow()" value="Lägg till data!">
</form>
The functions below work fine, the only thing I need help with is that when I pick an option from a drop down menu, it runs the function, but it erases all of the options in the drop down box. How can I get it NOT to do that and continue displaying my original options in the same drop down box?
<script type="text/javascript">
function gbid(s) {
return document.getElementById(s);
}
function myCount() {
var excel = new ActiveXObject("Excel.Application");
var excel_file = excel.Workbooks.Open("somefilepathhere.xlsx");
var excel_sheet = excel.Worksheets("Sheet1");
var agent,count
agent=document.getElementById("tAgent").value;
if (agent=="Agent1")
{
count=gbid('tAgent').innerText = excel_sheet.Cells(1,1).Value;
}
else if (agent=="Agent2")
{
count=gbid('tAgent').innerText = excel_sheet.Cells(2,1).Value;
}
document.getElementById("disphere").innerHTML = count;
excel.Quit();
excel.Application.Quit();
}
function saveToExcel() {
var myApp = new ActiveXObject("Excel.Application");
myApp.visible = false;
var xlCellTypeLastCell = 11;
var x = document.forms["f1"]["tAgent"].value;
if (x == null || x == "") {
alert("You must select an 'Entered By' option!");
return false;
}
else
var myWorkbook = myApp.Workbooks.Open(filePath);
var myWorksheet = myWorkbook.Worksheets(1);
myWorksheet.Activate;
objRange = myWorksheet.UsedRange;
objRange.SpecialCells(xlCellTypeLastCell).Activate;
newRow = myApp.ActiveCell.Row + 1;
alert('A new log was created on row '+newRow);
strNewCell = "A" + newRow;
myApp.Range(strNewCell).Activate;
myWorksheet.Cells(newRow,1).value = f1.tMemberid.value;
myWorksheet.Cells(newRow,2).value = f1.tDate.value;
myWorksheet.Cells(newRow,3).value = f1.tRep.value;
myWorksheet.Cells(newRow,4).value = f1.tIssuerep.value;
myWorksheet.Cells(newRow,5).value = f1.tLOB.value;
myWorksheet.Cells(newRow,6).value = f1.tContactnum.value;
myWorksheet.Cells(newRow,7).value = f1.tMembername.value;
myWorksheet.Cells(newRow,8).value = f1.tIssid.value;
myWorksheet.Cells(newRow,9).value = f1.tTypeofissue.value;
myWorksheet.Cells(newRow,10).value = f1.tDiscofissue.value;
myWorksheet.Cells(newRow,11).value = f1.tTimesent.value;
myWorksheet.Cells(newRow,12).value = f1.tSendto.value;
myWorksheet.Cells(newRow,13).value = f1.tAgent.value;
myWorkbook.Close(true);
myApp.Workbooks.Close;
myApp.Close;
alert('Process Complete!');
}
</script>
<table >
<tr>
<td class="tb_bor" Align="center" ><h1>ACA Issues Tracker</h1><br />
<b>Entered By: </b>
<select name="tAgent" id="tAgent" style="80% !important;" onchange="myCount()">
<option value="" ></option>
<option value="Agent1" >Agent 1</option>
<option value="Agent2" >Agent 2</option>
</select>
<br />You have completed: <p id="disphere"></p>
<hr>
</td>
</tr>
</table>
With the below line you overwrite the inner text of your select field:
count = gbid( 'tAgent' ).innerText = excel_sheet.Cells( 1,1 ).Value;
^
|
Allthough I'm not clear on what you desire to achieve with the code because I don't understand your usecase, I think you might have mistaken the second equals sign with a string concatenation or something?
This might be what you tried to achieve:
count = gbid( 'tAgent' ).innerText + ' ' + excel_sheet.Cells( 1,1 ).Value;
This is a corrected version of your function:
function myCount() {
var excel = new ActiveXObject( 'Excel.Application' ),
excel_file = excel.Workbooks.Open( 'somefilepathhere.xlsx' ),
excel_sheet = excel.Worksheets( 'Sheet1' ),
agent = document.getElementById( 'tAgent' ).value,
count;
if ( agent === 'Agent1' ) {
count = excel_sheet.Cells( 1,1 ).Value;
} else if ( agent === 'Agent2' ) {
count = excel_sheet.Cells( 2,1 ).Value;
}
document.getElementById( 'disphere' ).innerHTML = count;
excel.Quit();
excel.Application.Quit();
}