Good afternoon, I'm a beginner, I'm having trouble getting information from a table that consumes data from an api.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="main.js"></script>
<title>Document</title>
</head>
<body onload="apendeOnClick()">
<table id="tablerow">
<caption>Alien football stars</caption>
<thead>
<tr>
<th>DATA</th>
<th>TELEFONE</th>
<th>RAMAL</th>
<th>DESCRIÇÃO</th>
<th>ACÕES</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
<script>
</script>
</body>
</html>
My code is this, it feeds the table normally, but I would like when the person clicks on the row button to display the information in the alert.
main.js
fetch("https://my-json-server.typicode.com/lfnoleto/api-fake/contact").then((data) => {
return data.json()
}).then((Objectdata) => {
//console.log(Objectdata[0].data)
let tabelaData = ""
Objectdata.map((values)=>{
tabelaData += `<tr>
<td>${values.data}</td>
<td>${values.tefone}</td>
<td>${values.ramal}</td>
<td>${values.descricao}</td>
<td><button id="butao" class="btn btn-success" ><i class="fa fa-phone"></button></td>
</tr>`
})
document.getElementById("table_body").innerHTML = tabelaData
innerHTML = tabelaData
})
function apendeOnClick(){
const table = document.getElementById("tablerow")
console.log(table)
if (table) {
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].childNodes[5].childNodes[1].onclick = function() {
tableText(this);
};
}
}
}
function tableText(tableRow) {
let telefone = tableRow.childNodes[1].innerHTML;
let ramal = tableRow.childNodes[2].innerHTML;
let obj = {'telefone': telefone, 'ramal': ramal};
console.log(obj);
}
I hope that when the person clicks on the telephone icon, he displays the extension and telephone information
you can use data attribute to store extension info or other information.
<button id="butao" data-extension="123" class="btn btn-success" >
in javascript :
const button = document.querySelector('button');
button.dataset.extention // "123"
a good references:
https://www.w3schools.com/tags/att_data-.asp
https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
Related
I need to create a table in JS which have 3 cells in the first row and in the rest (20 rows) 4 column.
How should I do it work properly if I want to fill the rows from an array value?
So I have myArray[0, 1, 2, 3...] and those values need to insert into the table starting with the second row. (First is like header row)
const apptid_divs11 = [...document.querySelectorAll('.apptSearchResultSelected')];
const apptid_set11 = new Set(apptid_divs11.map(div => div.textContent.trim().split('#')[0]))
The apptid_set11 values needs to go to the table, but the size of the array is always changing
Your question isn't detailed. The following is an example which you can use as a home base
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style></style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<th>H1</th>
<th>H2</th>
<th colspan="2">H3</th>
</thead>
<tbody></tbody>
</table>
<script>
let myArrayData = Array.from(Array(20), (x, i) => i);
let rows = "";
for (let rowData of myArrayData) {
rows += `
<tr>
<td>${rowData}</td>
<td>${rowData}</td>
<td>${rowData}</td>
<td>${rowData}</td>
</tr>
`;
}
document.querySelector("table tbody").innerHTML = rows;
</script>
</body>
</html>
Good afternoon.
I am trying to create a button to refresh the page, through the Google app Script Web, but the method "window.location.reload ();", does not work could someone help?
link Google app Script Web: https://script.google.com/d/1jyWe9jm0dIqHsY1uKJZ0pOJYzLuq9dip1cSsXhxBwv53cFakW2LHgM_n/edit?mid=ACjPJvGbLXQwvhjDh7fsdifcTFvgQby-gsIUWeCSmwUzTdnVvXw8LNckG8rXcsyhcYvAcWAN7pU4E05bQEJwZl_1189N-bwyvttAxpHxmbvzUvx_d9SDKh19x3VzY9XxClhXweVlmqdMOSs&uiv=2
<html>
<base target="_se">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://tablesorter.com/__jquery.tablesorter.min.js" type="text/javascript"></script>
<button onclick="sortTable()">Sort</button>
<button onclick="refresh()">refresh </button>
<table class="striped centered ajuste" id="tab">
<thead >
<tr>
<th>ID</th>
<th>NOME</th>
<th>DATA</th>
</tr>
</thead>
<tbody id="coportoTabela">
</tbody>
</table>
document.addEventListener("DOMContentLoaded", function(){
google.script.run.withSuccessHandler(gerarTabela).pegarTabelaEstoque();
});
function gerarTabela(dataArray){
var tcorpo = document.getElementById("coportoTabela");
dataArray.forEach(function(r){
var linha = document.createElement("tr");
var coluna1 = document.createElement("td");
coluna1.textContent = r[0];
var coluna2 = document.createElement("td");
coluna2.textContent = r[1];
var coluna3 = document.createElement("td");
coluna3.textContent = r[2];
linha.appendChild(coluna1);
linha.appendChild(coluna2);
linha.appendChild(coluna3);
tcorpo.appendChild(linha);
});
}
function refresh(){
window.location.reload();
}
Try this:
Javascript:
function reLoad() {
google.script.run
.withSuccessHandler(function(url){
window.open(url,'_top');
})
.getScriptURL();
}
GS:
function getScriptURL() {
return ScriptApp.getService().getUrl();
}
After location.reload() you should return false in onclick function:
function teste(){
location.reload();
return false;
}
Am trying to print the values inside the textboxes on the page.
Upon clicking the button, the values appear on the page but only for a split second.
What can I do to make the values remain on the page?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>Local Storage - JavaScript <h2>
<fieldset>
<legend>Insert Data</legend>
<input id="inpKey" type="text" placeholder="Enter key...">
<input id="inpValue" type="text" placeholder="Enter Value...">
<button type="button" id="btnInsert">Insert Data</button>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="lsOutPut"></div>
</fieldset>
<script src="action.js">
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutPut = document.getElementById("lsOutPut");
btnInsert.onclick = function(){
const key = inpKey.value;
const value = inpValue.value;
if(key && value) {
localStorage.setItem(key, value);
location.reload();
}
for(let i = 0; i < localStorage.length; i++){
const keyx = localStorage.key(i);
const value = localStorage.getItem(keyx);
lsOutPut.innerHTML += `${keyx}: ${value}</br> `
}
}
</script>
</body>
</html>
In your code you have location.reload(), that's why its reloading the page, not sure why you have there, but its the cause:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h2>Local Storage - JavaScript <h2>
<fieldset>
<legend>Insert Data</legend>
<input id="inpKey" type="text" placeholder="Enter key...">
<input id="inpValue" type="text" placeholder="Enter Value...">
<input type="button" id="btnInsert" value="Insert Data"/>
</fieldset>
<fieldset>
<legend>Local Storage</legend>
<div id="lsOutPut"></div>
</fieldset>
<script>
const inpKey = document.getElementById("inpKey");
const inpValue = document.getElementById("inpValue");
const btnInsert = document.getElementById("btnInsert");
const lsOutPut = document.getElementById("lsOutPut");
btnInsert.onclick = function(){
const key = inpKey.value;
const value = inpValue.value;
if(key && value) {
localStorage.setItem(key, value);
}
for(let i = 0; i < localStorage.length; i++){
const keyx = localStorage.key(i);
const value = localStorage.getItem(keyx);
lsOutPut.innerHTML += `${keyx}: ${value}</br> `
}
}
</script>
</body>
</html>
In your code you have location.reload(), I presume to clear the div with previous values. This is reloading the page and causing the split second issue. Switch it for the following to clear the box before printing the new values.
if(key && value) {
localStorage.setItem(key, value);
lsOutPut.innerHTML = '';
}
While unrelated, it's also worth noting you aren't closing your <h2> tag.
<h2>Local Storage - JavaScript</h2>
Hello I am new to website development (started a couple of days ago).
I have some programming experience using Python and C#.
I have been trying to generate an HTML table using JS and apply it a Bootstrap css style.
I can't seem to get it to work.
What I get:
What I want:
I hope to get something that styles like this (simplified from: w3schools)
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</table>
</div>
</body>
</html>
My html page looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
</html>
and the JS script is:
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
myTable.appendChild(row);
}
}
myReader.readAsText(theFile);
}
return false;
}
The csv data file I load looks like this:
TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144
This is the generated HTML table from the JS:
<table id="myTable" class="table">
<tr>
<th>TestA</th>
<th>TestB</th>
<th>TestC</th>
<th>TestD</th>
</tr>
<tr>
<td>Alpha</td>
<td>0.551608445</td>
<td>0.807554763</td>
<td>54.8608682</td>
</tr>
<tr>
<td>Beta</td>
<td>0.191220409</td>
<td>0.279946678</td>
<td>57.55254144</td>
</tr>
<tr>
<td></td>
</tr>
</table>
You are missing a <tbody> element around all the <tr> Elements. thats it. if you insert this additionally you are fine with your layout.
I've changed your code quite a bit but here is a working example:
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var fileSize = 0;
var theFile = document.getElementById("myFile").files[0];
if (theFile) {
var table = document.getElementById("myTable");
var headerLine = "";
var myReader = new FileReader();
myReader.onload = function(e) {
var content = myReader.result;
var lines = content.split("\r");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
}
myReader.readAsText(theFile);
}
return false;
}
</script>
</html>
Working example without having to upload a file
<!DOCTYPE html>
<html>
<head>
<title>CSVParser</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="#" name="myForm" id="aForm" method="POST">
<textarea id="myFile" name="myFile">TestA,TestB,TestC,TestD
Alpha,0.551608445,0.807554763,54.8608682
Beta,0.191220409,0.279946678,57.55254144</textarea><br>
<input type="button" name="submitMe" value="Process File" onclick="processFile();">
</form>
<table id="myTable" class="table"></table>
</div>
</body>
<script type="text/javascript">
function processFile() {
var table = document.querySelector("#myTable");
var content = $("#myFile").val();
var lines = content.split("\n");
var tbody = document.createElement("tbody");
for (var count = 0; count < lines.length; count++) {
var row = document.createElement("tr");
var rowContent = lines[count].split(",");
for (var i = 0; i < rowContent.length; i++) {
if (count == 0) {
var cellElement = document.createElement("th");
} else {
var cellElement = document.createElement("td");
}
var cellContent = document.createTextNode(rowContent[i]);
cellElement.appendChild(cellContent);
row.appendChild(cellElement);
}
tbody.appendChild(row);
}
table.appendChild(tbody);
return false;
}
</script>
</html>
ALSO! You are using myTable.appendChild(row); in your code although you've never initialized any myTable variable.
Load your js script just before the </body> end tag.
Now you are loading the JavaScript before the browser has read all your tags and by then it can't find the elements you are querying in your script.
<body>
<div class="container">
<form onsubmit="return processFile();" action="#" name="myForm" id="aForm" method="POST">
<input type="file" id="myFile" name="myFile"><br>
<input type="submit" name="submitMe" value="Process File">
</form>
<table id="myTable" class="table"></table>
</div>
<!-- Here's the difference -->
<script type="text/javascript" src="../scripts/csvToHtml.js"></script>
</body>
I wish to have the array of inputs to be remembered using the local storage feature of html5. At the moment i can populate the array with weight inputs but once i refresh they disappear. Could anyone help me with this.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Fitness</title>
<link type="text/css" rel="stylesheet" href="styles.css" />
<script>
var arrayX =10;
var arrayY =2;
var array=new Array(arrayX);
var arrayIndex=0;
for (x=0; x<array.length; x++)
{
array [x] = new Array(arrayY);
}
function insert(val1, val2){
if (arrayIndex >= arrayX)
{
alert("Recent Entries is Full");
return false;
}
array[arrayIndex][0]=val1;
array[arrayIndex][1]=val2;
arrayIndex++;
document.getElementById('weight1').value = '';
document.getElementById('unit').value = '';
}
function show() {
var string='<b>Weight Entries</b><br>';
for(i = 0; i < array.length; i++)
{
string+=''+array[i][0]+' '+array[i][1]+'<br>';
}
if(array.length > 0)
document.getElementById('myDiv').innerHTML = string;
}
</script>
</head>
<body>
<header>
<h1>Weight Tracker</h1>
</header>
<article>
<h2>Weight Input</h2>
<p>Please enter your current weight below and submit.</p>
</article>
<form name="form1">
<table align="center" width="407">
<tr>
<td width="154" align="right"><b>Weight</b> </td>
<td width="9"><b> :</b></td>
<td width="224">
<input type="integer" name="weight" id="weight1"/></td>
<tr>
<td width="154" align="right"><b>Unit (KG,Ibs, Stone)</b></td>
<td width="9"><b> :</b></td>
<td width="224">
<input type="integer" name="unit" id="unit"/></td>
</tr>
</table>
</br>
<table width="407">
<input type="button" value="Submit Weight"
onclick="insert(this.form.weight.value,this.form.unit.value);"/>
<input type="button" value="Recent Entries"
onclick="show();"/>
</table>
</form>
</br>
<div id="myDiv"></div>
<nav>
<ul>
<li>home</li>
</ul>
</nav>
just stringify your array and save it to localStorage when you are done.
localStorage["array"] = JSON.stringify(array)
<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Template Index</title>
<style>
</style>
</head>
<body>
<div>
<input id="name"/>
</div>
<script>
window.addEventListener("beforeunload", function () {
var name = document.getElementById("name");
localStorage.setItem("name", name.value);
}, false);
window.addEventListener("load", function (){
var name = document.getElementById("name");
name.value = localStorage.getItem("name");
}, false);
</script>
</body>
</html>
the core code is above. you can make your own logic to accomplish your goal
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage