I have a website table that shows a variety of data, which currently changes which data are viewed based on a variable string passed in the URL. This example looks as follows:
www.acoolwebsite.com/?variable=var1
I've provided a synthesized view of the table's current header structure, which is as follows:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Static1</th>
<th>Static2</th>
<th>Static3</th>
<th>Variable1</th>
<th>Variable2</th>
<th>Variable3</th>
</tr>
</table>
</body>
</html>
I am looking to change the headers Variable1, Variable2, & Variable3 to another set of headers, say Change1, Change2, & Change3 if the passed variable in the URL www.acoolwebsite.com/?variable=var1 matches a certain string.
Using JavaScript, I've been able to partition the variable passed in the URL, but am uncertain how to isolate and alter header names. What additional steps can I take to produce this outcome?
You should assign an ID for your table headers and use innerHTML. See sample snippet below:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Static1</th>
<th>Static2</th>
<th>Static3</th>
<th id="v1">Variable1</th>
<th id="v2">Variable2</th>
<th id="v3">Variable3</th>
</tr>
</table>
<input type="button" value="Click" onclick="changeHeaders()" />
<script>
function changeHeaders() {
// You variables
let v1 = 'change1';
let v2 = 'change2';
let v3 = 'change3';
document.getElementById("v1").innerHTML = v1;
document.getElementById("v2").innerHTML = v2;
document.getElementById("v3").innerHTML = v2;
}
</script>
</body>
</html>
Related
I am a newbie and rather a passionate starting to learn programming, than experienced guy.
I have done my research, yet unsuccessful, on how to get data from a Google Sheet and insert cell values into pre-made HTML template.
Task at hand is to generate employees email signatures prepared in HTML. Doing it manually was too time consuming and prone to mistakes.
Any change or update is really painful with this method.
I have found this tutorial and implemented it successfully
https://www.bpwebs.com/pull-data-from-google-sheets-to-html-table
After that I tried to replicate what was working in new project, but no results.
Ideally, expected result would be to run the app and be provided with as many ready HTML files as there are rows in the source Sheet file. There is also one condition, where one of the fields is to be displayed only for some employees (if blank, then insert nothing).
Please note I am very new to javascript, but eager to learn.
EDIT:
I have been asked to share what I have prepared by now. Cannot paste it in comments due to characters limit.
This is the Apps Script that shows simplified version of HTML that I am trying to manipulate. I was able to prepare a JS that changes name and surname as well as controls a portion of scr of img tag.
https://script.google.com/macros/s/AKfycbx6fapewLMLxgzrRKAY2bybR6HUngoA0sd-CaJHvXxF7TsbByqRWV_4cNpwzPAJJTJvpw/exec
(it should require Google account sing in. Unfortunately, option to share publicly disappeared)
I am also sharing a HTML with script put inside head section (in the Apps Script I have separate 'javascript' file that I am calling in HTML template file)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;600;800;900&display=swap" rel="stylesheet">
<script>
window.onload = function() {
//I need the var name to be pulling data from the Google Sheets
var name = 'blank-profile-picture-973460_1280';
var imgsrc = name;
document.getElementById('imgSource').src = 'https://cdn.pixabay.com/photo/2015/10/05/22/37/' + imgsrc + '.png';
var emName = 'Joe';
var emSurname = 'Doe';
document.getElementById('Name').innerHTML = emName
document.getElementById('Surname').innerHTML = emSurname
};
</script>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" style="vertical-align:-webkit-baseline-middle;font-family:'Poppins', sans-serif;">
<tbody>
<td>
<td valign="middle" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 20px;">
<span style="margin:0px;font-family:'Poppins', sans-serif;font-size:20px;font-weight:800; padding-top:5px;color:black" id="Name" ></span> <span style="margin:0px;font-family:'Poppins', sans-serif;font-size:20px;font-weight:800; padding-top:5px;color:#3d85c6" id="Surname"></span><br><img width="158" height="158" min-height="158" min-width="158" max-height="158" max-width="158" src="" id="imgSource">
</td>
</td>
</tbody>
</body>
</html>
In the article linked above, they are pulling whole table using array. Now I need to either map a whole columns (Name, Surname, img src) or specific cells to pull these values.
Best Regards,
Mac
Here is an example of how to create a table using both templated HTML and google.script.run
I create a simple spreadsheet as shown.
Next in Code.gs I create my scripts
function showTest() {
var html = HtmlService.createTemplateFromFile("HTML_Test");
SpreadsheetApp.getUi().showModalDialog(html.evaluate(),"Test");
}
function getData() {
try {
let spread = SpreadsheetApp.getActiveSpreadsheet();
let sheet = spread.getSheetByName("Sheet2");
let values = sheet.getDataRange().getDisplayValues();
values.shift(); // remove header
return values;
}
catch(err) {
Logger.log(err);
}
}
For templated HTML I create my page HTML_Test.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
table, th, td {
border:1px solid black;
}
</style>
</head>
<body>
<? var data = getData(); ?>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<? for (var i = 0; i < data.length; i++) { ?>
<tr>
<td><?= data[i][0] ?></td>
<td><?= data[i][1] ?></td>
</tr>
<? } ?>
</table>
</body>
</html>
Or using an Immediately Invoked Function HTML_Test
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
table, th, td {
border:1px solid black;
}
</style>
</head>
<body>
<table id="table">
</table>
<script>
( function () {
try {
google.script.run.withSuccessHandler(
function (data) {
let table = document.getElementById("table");
for( let i=0; i<data.length; i++ ) {
let row = document.createElement("TR");
let cell = document.createElement("TD");
let text = document.createTextNode(data[i][0]);
cell.appendChild(text);
row.appendChild(cell);
cell = document.createElement("TD");
text = document.createTextNode(data[i][1]);
cell.appendChild(text);
row.appendChild(cell);
table.appendChild(row);
}
}
).getData();
}
catch(err) {
alert(err);
}
}
)();
</script>
</body>
</html>
And the results are
Reference
Templated HTML
google.script.run()
How can I write in a table <td> using Javascript with document.getElementById("Table").rows[i].cells[j]? Or any other possible ways?
I want to write stuff into the <td></td> with javascript.
I used this code for the first part, but when I reused it, it didn't work. If it helps, the table was generated with javascript:
var cell = document.createElement("td");
var cellText = document.createTextNode(i+j);
cell.appendChild(cellText);
See create table using JavaScript:
var td = document.createElement('td');
td.appendChild(document.createTextNode('text'))
Here is a working example, with a basic table created in the markup.
// save the table to a var
var table = document.getElementById('my_table');
// save table body to a var. select the first occurrence of tbody element with [0]
var tableRef = table.getElementsByTagName('tbody')[0];
// save new row tr to a variable. this generates a tr
var newRow = tableRef.insertRow(tableRef.rows.length);
// insert a cell into newRow at index 0, 1, and 2, the td's for this row
var newTD1 = newRow.insertCell(0);
var newTD2 = newRow.insertCell(1);
var newTD3 = newRow.insertCell(2);
// create a text node for the TD
var tdText1 = document.createTextNode('cell text 1');
// add the text to the newly generated newTD1
newTD1.appendChild(tdText1);
// create a text node for the TD
var tdText2 = document.createTextNode('cell text 2');
// add the text to the newly generated newTD2
newTD2.appendChild(tdText2);
// create a text node for the TD
var tdText3 = document.createTextNode('cell text 3');
// add the text to the newly generated newTD3
newTD3.appendChild(tdText3);
/* table styles */
#my_table {
border-collapse: collapse;
border: 4px solid black;
margin: 0 auto;
text-align: center;
}
/* table tr, td styles */
#my_table th,
#my_table td {
border: 2px solid black;
}
/* table header styles */
#my_table th {
background-color: #33c6ff;
color: #000;
width: 33%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<table id='my_table'>
<thead>
<tr>
<th id='table_header' colspan='3'>Table Title</th>
</tr>
<tr>
<th>Header Row 1</th>
<th>Header Row 2</th>
<th>Header Row 3</th>
</tr>
</thead>
<tbody id='table_body'>
</tbody>
</table> <!-- ends table -->
</body>
</html>
I have created the table using DataTable.
It looks like this:
What I want to do is to split them like this:
How can I achieve that with customized CSS?
My HTML looks like this:
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
<script type="text/javascript" language="javascript" src="./src/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="./src/dataTables.colVis.min.js"></script>
<script>
$(document).ready(function() {
$('.sortable-table').DataTable( {
// Allow column selection, based on this
// https://datatables.net/extensions/colvis/
"dom": 'C<"clear">lfrtip',
// Except first column,
// it should stay.
// https://datatables.net/extensions/colvis/options
colVis:{exclude:[0]}
});
} );
</script>
<style>
body {
font-family: 'Helvetica Neue';
margin:150px;
}
img {
max-width:65%;
max-height:65%;
}
</style>
<title>Experiment 11</title>
</head>
<body>
<h2> G. Shared functional annotation</h2>
Here the functional analysis is scored with <tt>-log(Pvalue)</tt>.
<h3> LN </h3>
<table border="1" class="dataframe sortable-table display compact pure-table">
<thead>
<tr style="text-align: left;">
<th>GO</th>
<th>FOO</th>
<th>BAR</th>
</tr>
</thead>
<tbody>
<tr>
<td> regulation of response to wounding</td>
<td> 6.850</td>
<td> 11.975</td>
</tr>
</table>
</body>
</html>
As Per your example:
<div class="ColVis" >
<button class="ColVis_MasterButton">
<span>Show / hide columns</span>
</button>
</div>
This is your html for that button now we are applying css to it
.ColVis{
width:100%
}
button.ColVis_Button{
float:right
}
Provide Width 100% to your Colvis class and FLOAT:right to button.
Note :
If possible then apply new class for colvis and for button because if you change style of colVis then maybe it will change style in your other template or in your other layout so test it first.
example: http://jsfiddle.net/kevalbhatt18/urxk3q0z/2/
When you see output in jsfiddle first starch the size of output screen
so you can see proper output
Try adding this rule to your CSS:
div.ColVis {
float: right;
margin-bottom: 1em;
}
Okay, so after reviewing your code then hopping on the ColVis website and inspecting their search and show/hide button, I have come to the conclusion! I need to see your CSS because, at the moment, the way they have it is predefined to inherit from the parent class. So, if you want to adjust the predefined css then manipulate this: button.ColVis_Button, ul.ColVis_collection li, this is the class hierarchy they use to move the button around. Just add the !important tag to the things you need changed.
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();
I am trying to fit a canvas element into a table cell with no padding at all, i.e. I want no margins between my canvas and top/bottom of the cell. Therefore, I define row height as 20px and canvas height as 20px. I also use padding:0px styling. However, I get no padding only from top and left and I still do get padding at the bottom. In fact, it looks like the table cell gets taller in order to accommodate for the undesired margin. How can I resolve it?
Also, what is the difference between defining canvas width and height in HTML and CSS? Will one override the other?
Below is my HTML code.
Thanks.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>
<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})
</script>
</head>
<style media="screen" type="text/css">
.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>
<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>
</body>
</html>
Try adding the following to the canvas's style:
display : block;
Demo: http://jsfiddle.net/S7YJu/
You can see why if you look at this: http://jsfiddle.net/S7YJu/1/ - by default the canvas displays inline which means it lines up in a way that leaves space for the bottom of letters like "y" or "p" to hang beneath...
Despite your question has been already answered i would like to point the following.
Canvas element are treated very like inline elements despite the seem to be block level elements, similar to how an image element is treated. To fix your problem you have to set the style rule display to block for canvas.
with the best of intentions i would like to give you some advice :
1 You omitted th opening body tag.
2 Is recomended to put script tags at bottom.
4 Use divs instead of table elements when possible.
5 You don't always use Jquery selectors...
i.e.
document.getElementById('my_canvas');
Copy ->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.my_cell {width:100px; }
.my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
<tbody>
<tr>
<td class="my_cell"></td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
});
var canvas = $('.my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,0,20,20);
</script>
</body>
</html>