I'm developing a web application.My App is using Javascript, PHP, HTML. I already done apply code to upload xlsx , attach it on screen .
Here's my Code
<script type="text/javascript" src="simple-excel.js"></script>
<table width=50% align="left" border=0 STYLE="border-collapse:collapse;">
<tr>
<td style="width:9.2%"><b>Load CSV file</b></td>
<td style="width:1%"><b>:</b></td>
<td style="width:15%"><input type="file" id="fileInputCSV" /></td>
</tr>
</table>
<table id="result"></table>
<script type="text/javascript">
// check browser support
// console.log(SimpleExcel.isSupportedBrowser);
var fileInputCSV = document.getElementById('fileInputCSV');
// when local file loaded
fileInputCSV.addEventListener('change', function (e) {
// parse as CSV
var file = e.target.files[0];
var csvParser = new SimpleExcel.Parser.CSV();
csvParser.setDelimiter(',');
csvParser.loadFile(file, function () {
// draw HTML table based on sheet data
var sheet = csvParser.getSheet();
var table = document.getElementById('result');
table.innerHTML = "";
sheet.forEach(function (el, i) {
var row = document.createElement('tr');
el.forEach(function (el, i) {
var cell = document.createElement('td');
cell.innerHTML = el.value;
row.appendChild(cell);
});
table.appendChild(row);
});
});
});
</script>
Here's my UI
How do i supposed to do for hide/erase the null cell(Red Mark)?
It seems your CSV has an empty line at the bottom. Even if it is empty, as far as "sheet" is concerned, it will have one field as long as a carriage return is there.
I'd check to see if the content of the "el" contains anything before executing your el.forEach()
Put some condition inside el.forEach
Like this
el.forEach(function (el, i) {
if(el.value!="")
{
var cell = document.createElement('td');
cell.innerHTML = el.value;
row.appendChild(cell);
}
});
Related
This question already has answers here:
Google script - using template to build table
(1 answer)
Passing variable to HTML output and then into a scriptlet
(1 answer)
Closed 2 years ago.
I have data in a sheet in this format which has to be presented in a tabular form inside an HTML Page
I am using Google App Script for achieving the same. The below code is for trying out this option and if this works, I will fit the code into my original HTML Page.
All other things are working fine except the excel data is not coming into the HTML page. I am able to form the table equal to the length of the data but the information inside it is not coming. I have checked the javascript code independently and the data is being fetched to the code, but it is not appearing in the HTML Code.
I have written the following HTML code
<!DOCTYPE HTML>
<HTML>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<? for (var i=0; i<defintion_s_no.length;i++) {?>
<tr>
<th><?defintion_s_no[i]; ?></th>
<th> 1 </th>
</tr>
<? }?>
</table>
</body>
</html>
and the following javascript code for the same
var url = 'https://docs.google.com/spreadsheets/d/1CGZVG6NGAy325wgCz-dS6ZjJ_it5ShzLshIdD-CCpqs/edit';
function doGet(e){
return definition();
}
function defintion() {
var ss = SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("Datafeed");
var defintion_s_no = data_till_lastrow_coulmn("Description");
var tmp = HtmlService.createTemplateFromFile('try');
tmp.defintion_s_no = defintion_s_no.map(function(r){ return r[0]; });
return tmp.evaluate().setTitle('Daily Task Updater');
}
function data_till_lastrow_coulmn(key) {
//get the data till the last row of a specified column using the key to find the header of the column
var ss = SpreadsheetApp.openByUrl(url);
var webAppSheet = ss.getSheetByName("Datafeed");
var last_row = webAppSheet.getLastRow();
var header_values = webAppSheet.getRange(1,1,1,15).getValues()[0];
var dropdown_column = 0;
//find the column of the "key" in the header row
for (var i=0; i<15; i++){
if(header_values[i]==key){
dropdown_column = i+1;
}
}
//finding the last row in the column containing key as the header
var workstream_Values = webAppSheet.getRange(2,dropdown_column,last_row,1).getValues();
var dropdown_lastrow = 0;
var blank = false;
for (var i=0;i<last_row;i++){
if(workstream_Values[i+1]==""&& !blank){
dropdown_lastrow = i+1;
blank = true;
break;
}
else if(workstream_Values[i] != ""){
blank = false;
}
}
return webAppSheet.getRange(2,dropdown_column,dropdown_lastrow,1).getValues();
}
I am unable to see the data here
actually i am making a todolist so i want to replace div which i added through in innerhtml with tr and after created of the first row in html please check
Html Part:
<table id="ws-table" class="table table-bordered">
<tr id="insert">
<th>#</th>
<th>Date</th>
<th>Items</th>
<th>Edit / Delete</th>
</tr>
<!-- Here i wanted an tr
</table>
actually i am making a todolist so i want to replace div which i added through in innerhtml with tr and after created of the first row in html please check
javascript part :
var takeInput;
var DATA = [];
load();
function insertItem(){
takeInput = document.getElementById('item').value;
DATA.push(takeInput);
renderJson(DATA);
document.getElementById('item').value = "";
}
function renderJson(data){
document.getElementById('container').innerHTML = "";
for(var i in data){
container.innerHTML = container.innerHTML + "<div id=" + i + " onclick='removeItem(this.id)'><input type='checkbox'/><label>"+data[i]+"</label></div>";
}
save();
}
function removeItem(Id){
var itemId = document.getElementById(Id);
if(itemId.childNodes[0].checked == true){
var arr_ind = DATA.indexOf(itemId.childNodes[1].innerText);
DATA.splice(arr_ind,1);
itemId.parentNode.removeChild(itemId);
save();
}
}
function save(){
localStorage.myList = JSON.stringify(DATA);
}
function load(){
DATA = JSON.parse(localStorage.myList);
renderJson(DATA);
}
Element.innerHTML is for replacement only, so you need to read it first concatenate with new row and then assing back, better use Element.insertAdjacentHTML():
var row = "<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>";
document.querySelector("#ws-table tbody").insertAdjacentHTML("beforeend", row);
You may want to use thead for your table header. Check this thread for more information.
I am creating a program that connects to Firebase Realtime Database and displays the value in a table.
Her is my code:
var leadsRef = database.ref('leads/'+leadID);
var table = document.getElementById('remarksTable');
leadsRef.on('child_added', function(snapshot) {
var remark = snapshot.val().remark;
var timestamp = snapshot.val().timestamp;
var row = document.createElement('tr');
var rowData1 = document.createElement('td');
var rowData2 = document.createElement('td');
var rowData3 = document.createElement('td');
var rowDataText1 = document.createTextNode(remark);
var rowDataText2 = document.createTextNode(timestamp);
var rowDataText3 = document.createTextNode("Some text");
rowData1.appendChild(rowDataText1);
rowData2.appendChild(rowDataText2);
rowData3.appendChild(rowDataText3);
row.appendChild(rowData1);
row.appendChild(rowData2);
row.appendChild(rowData3);
table.appendChild(row);
});
leadID is an ID which I get from the current url, it contains the correct value so no issues there, path is also absolutely right.
Here is the table code:
<table class="table table-bordered" id="remarksTable">
<tr>
<th><strong>Created On</strong></th>
<th><strong>Timestamp 2</strong></th>
<th><strong>Remarks</strong></th>
</tr>
<tr>
<td>12312313231</td>
<td>12312312312</td>
<td>just a remark.</td>
</tr>
</table>
Now, when I run the page, it connects to the Firebase database and loads the required values, creates table row and table data, attaches text to it and then finally attaches the row to table with the id of remarksTable but it is not creating rows properly. Please note the table is creating using Bootstrap.
This is how it looks:
As you can see, the first row displays fine but the next 2 rows which were created by javascript looks a bit different.
The most likely reason is that you are appending the new row to the table element and not the tbody element inside it, which is interacting poorly with the stylesheet that you didn't include in the question.
Note that all tables have a tbody element. The start and end tags for it are optional so it will be inserted by HTML parsing rules if you don't provide one (or more) explicitly).
#Quentin is right, or you can simply add new rows this way:
var table = document.getElementById("remarksTable");
var row = table.insertRow();
var rowData1 = row.insertCell(0);
var rowData2 = row.insertCell(1);
var rowData2 = row.insertCell(2);
rowData1.innerHTML = remark;
rowData2.innerHTML = timestamp;
rowData3.innerHTML = "some text";
Here is a working demo
function addCells() {
var table = document.getElementById("remarksTable");
var row = table.insertRow();
var rowData1 = row.insertCell(0);
var rowData2 = row.insertCell(1);
var rowData3 = row.insertCell(2);
rowData1.innerHTML = "your remark";
rowData2.innerHTML = "your timestamp timestamp";
rowData3.innerHTML = "some text";
}
<table id="remarksTable" border=1>
<tr>
<td>first cell</td>
<td>2nd cell</td>
<td>3rd cell</td>
</tr>
</table>
<button onclick="addCells()">Add New</button>
I have this javascript that dynamically creates a table in HTML from a CSV file. I’m also using bootstrap and they have a cool ‘content editable’ class for table cells where you can edit the ’td’ element. I’m trying to add some css or just a border to a table cell after it has been edited. I’ve tried some jQuery but with no success. Any suggestions would be appreciated.
heres the github i used click here, essentially the same example with a few extra lines of javascript.
JavaScript:
<script type="text/javascript">
// check browser support
// console.log(SimpleExcel.isSupportedBrowser);
var fileInputCSV = document.getElementById('fileInputCSV');
// when local file loaded
fileInputCSV.addEventListener('change', function (e) {
// parse as CSV
var file = e.target.files[0];
var csvParser = new SimpleExcel.Parser.CSV();
csvParser.setDelimiter(',');
csvParser.loadFile(file, function () {
// draw HTML table based on sheet data
var sheet = csvParser.getSheet();
var table = document.getElementById('result');
var tbody = document.createElement('tbody');
table.innerHTML = "";
sheet.forEach(function (el, i) {
var row = document.createElement('tr');
el.forEach(function (el, i) {
var cell = document.createElement('td');
cell.setAttribute('contenteditable', 'true');
cell.setAttribute('id', 'cells');
cell.innerHTML = el.value;
row.appendChild(cell);
});
table.appendChild(tbody);
tbody.appendChild(row);
});
// create button to export as TSV
var btnSave = document.getElementById('fileExport');
btnSave.hidden = false;
btnSave.value = 'Save as TSV file ->';
document.body.appendChild(btnSave);
// export when button clicked
btnSave.addEventListener('click', function (e) {
var tsvWriter = new SimpleExcel.Writer.TSV();
tsvWriter.insertSheet(csvParser.getSheet(1));
tsvWriter.saveFile();
});
var data = csvParser.getSheet(1);
// var json_data = JSON.stringify(data);
console.log("data here", data);
angular.element('#angular-controller').scope().getCSV(data);
// print to console just for quick testing
// console.log(csvParser.getSheet(1));
// console.log(csvParser.getSheet(1).getRow(1));
// console.log(csvParser.getSheet(1).getColumn(2));
// console.log(csvParser.getSheet(1).getCell(3, 1));
// console.log(csvParser.getSheet(1).getCell(2, 3).value);
});
});
</script>
jQuery:
$(document).ready(function() {
$('#fileInputCSV').on('change',function() {
$('#save-button').css('display','inline-block');
$('#add-row').css('display', 'inline-block');
});
$('#cells').on('change', function() {
console.log("change");
$('#cells').css('style','border:2px solid orange');
});
});
HTML:
<div class="row">
<div class="container-fluid">
<button type="button" class="btn btn-success btn-sm" id="add-row" style="display:none" data-toggle="modal" data-target="#myModal">Add Row</button>
<button class="btn btn-sm btn-success pull-right" id="save-button" style="display:none">Save</button>
<table id="result" class="table table-condensed"></table>
<input type="button" id="fileExport" hidden="true" />
</div>
</div>
Have you tried to insert bootstrap´s table-bordered class to the object after is has been edited, like:
<table id="result" class="table table-condensed table-bordered"></table>
Check in the usagehere
Look at all bootstrap table possible flags here
To load a class dynamically to the result table (id="result") use:
$(#result).addClass("table-bordered");
I have a button as well as in a table row.When I click on button new row should be added in the table and button should be present in newly added row .refer the picture
Here's a quick solution to adding new rows with buttons that will also add new rows.
You didn't add any code, but this works.
https://jsfiddle.net/scheda/Lhsvmqoy/
var b = document.querySelector('.clicky')
var table = document.querySelector('table');
var insert_this = '<tr><td><input type="text" placeholder="Look ma!"/><button class="clicky">Add more stuff</button></td></tr>';
document.querySelector('body').addEventListener('click', function(e) {
if (e.target.className === 'clicky') {
table.innerHTML += insert_this;
}
});
This should work as you expect:
<!DOCTYPE html>
<head>
<style>
td,table{border:solid 1px;}
</style>
<title>Table sample </title>
</head>
<body>
<table id="myTable">
<tr>
<td>Row 1</td><td></td>
</tr>
<tr>
<td>Row 2</td><td><button id="newRow">New Row (original button)</button></td>
</tr>
</table>
</body>
<script>
function addRow() {
// Get a reference to the table
var tableRef = document.getElementById('myTable');
// Insert a row in the table at the end
var newRow = tableRef.insertRow(tableRef.rows.length);
// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML="Row " + tableRef.rows.length;
var newCell = newRow.insertCell(1);
// Append button node to the cell
var newButton = document.getElementById('newRow');
newCell.appendChild(newButton);
}
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn, false);
}else {
elem.attachEvent("on" + event, function() {
// set the this pointer same as addEventListener when fn is called
return(fn.call(elem, window.event));
});
}
}
var mybutton = document.getElementById("newRow");
addEvent(mybutton,"click",addRow);
</script>
</html>
Source/Credits:
The addEventListener function: adding event listener cross browser
Add row function (modified from):
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow