This is my code how to dynamically add the html table do not use Jquery. Only use html and javascript. this code was server to client application this client receive the Json object to parse in string . how to add html table.
## <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="E:\vj\SignalR\json_js\json.js"></script>
<script src="E:\vj\SignalR\json_js\json2.js"></script>
<script src="E:\vj\SignalR\json_js\bson\bson.js"></script>
<script type="text/javascript">
var ws = new WebSocket("ws://localhost:8100");
var received_msg;
var Dictionary=new Dictionary();
var globalSymbol;
function WebSocketTest()
{
ws.onerror = function ()
{
alert("error");
};
ws.onopen = function ()
{
alert("Client Connected");
ws.send("New1");
};
ws.onclose = function ()
{
alert("Connection is closed...");
};
ws.onmessage=function(evt)
{
var msg=evt.data
alert(msg);
var jsn=JSON.parse(evt.data);
//var text =('{"newQuote":' + jsn);
var tbl = document.getElementById('_table_Quote_ID');
var lastRow = tbl.rows.length;
var iteration = lastRow;
var row = tbl.insertRow(lastRow)
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = jsn[0].symbol;
cell2.innerHTML = jsn[1].bid;
cell3.innerHTML = jsn[2].ask;
cell4.innerHTML = jsn[3].high;
cell5.innerHTML = jsn[4].low;
First of all, I understand this you say 'how can I create dynamic table ' , I hope this code can fix your problem
<script>
var length = 5 // this is your data lenght i write 5 for examples
var table = "<table border = '1' cellpadding='10'>";
for (var i = 0 ; i < length ; i++) {
table += "<tr>";
for (var j = 0 ; j < length ; j++) {
table += "<td> value </td>";
}
table += "</tr>";
}
table += "<table>";
document.write(table);
</script>
Related
I making a table and show it in the modal dialogue so that buttons will appear for each row in the table. My question is how to make the button in the modal dialogue run for specific row in spreadsheet? Example : click first button in first row in modal dialogue, will run and change data in first row of spreadsheet. Do I need to create specific ID for each buttons?
My GS code:
function leadRespond(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Query_Script");
var dataRange = sheet.getDataRange();
var dataValue = dataRange.getDisplayValues();
var temp = HtmlService.createTemplateFromFile("lead");
temp.data = {application : dataValue};
var html = temp.evaluate().setWidth(1200).setHeight(600);
SpreadsheetApp.getUi().showModalDialog(html,"Manage Leave");
}
HTML code:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<h1>Leave Application</h1>
<div id="output"></div>
<script>
var output = document.getElementById("output");
window.onload = function (){
google.script.run.withSuccessHandler(onSuccess).getTable();
}
function onSuccess(data){
if(data.success){
console.log(data.data);
var html = '<table>';
var row;
for(var i=0; i<data.data.length; i++){
html += '<tr>';
row = i;
//console.log(row);
for (var j=0; j<9; j++){
html += '<td>'+ data.data[i][j]+'</td>';
}
html += '<td>'+ '<button onclick="approve()">Approved</button>'+'</td>';
html += '</tr>';
}
html += '</table>';
output.innerHTML = html;
console.log(data);
}
}
function approve(){
google.script.run.getRow();
console.log("test");
}
</script>
</body>
</html>
Code with google.script.run :
function getTable(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Query_Script");
var data = sheet.getDataRange().getDisplayValues();
Logger.log(data);
return {'success': true,'data':data};
}
function getRow(){
var ss = SpreadsheetApp.getActiveSpreadsheet();
var sheet = ss.getSheetByName("Query_Script");
for (var i=0; i<dataValue.length; i++){
var row = "";
var rowNum;
for (var j = 0; j < 9; j++) {
if (dataValue[i][j]) {
row = row + dataValue[i][j]; //row = "" + range(0,0) [emailAddress], row = range(0,0)+ range(0,1)[emailAddress,Timestamp]
}
row = row + ",";
}
row = row + " Row num " + i;
rowNum = i;
Logger.log(row);
Logger.log(rowNum);
}
}
Use custom html-data attributes and delegate event to <table>:
html += '<td>'+ '<button data-row="'+i+'" data-column="'+j+'">Approved</button>'+'</td>';
//...
output.innerHTML = html;
console.log(data);
const table = document.querySelector("table");
table.addEventListener('click', approve);
}
function approve(e){
const td = e.target;
const [row, column] = [td.dataset.row,td.dataset.column];
google.script.run.modifyRows(row,column);
}
This picture defines what I need
I want that the data I enter dynamically to be converted to table with each comma defining the column and the newline defining the new row.
Below is the code I have tried. Can I have a better approach to this problem?
<script>
function myFunction()
{
var x = document.getElementById("textarea").value.split(" ");
var customers = new Array();
customers.push(x[0]);
customers.push(x[1]);
customers.push(x[2]);
var table = document.createElement("TABLE");
table.border = "1";
//Get the count of columns.
var columnCount = customers[0].length;
//Add the header row.
var row = table.insertRow(-1);
for (var i = 0; i < columnCount; i++) {
var headerCell = document.createElement("TH");
headerCell.innerHTML = customers[0][i];
row.appendChild(headerCell);
}
//Add the data rows.
for (var i = 1; i < customers.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < columnCount; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = customers[i][j];
}
}
var dvTable = document.getElementById("dvTable");
dvTable.innerHTML = "";
dvTable.appendChild(table);
}
</script>
<html>
<head>
<title>Player Details</title>
</head>
<body align = "center">
<h3 align = "center"><b>Input CSV</b></h3>
<p align = "center"><textarea rows="10" cols="50" name = "csv" id = "textarea"></textarea></p><br>
<button type="button" id = "convert" onclick="myFunction()">Convert</button><br>
<br>
<div id = "team"></div>
</body>
</html>
You need to split the data first using newline (\n) and then using comma (,) character.
The table can be created as string and finally inserted to the correct div.
Refer the code below to get you started.
function myFunction() {
var tbl = "<table class='table table-responsive table-bordered table-striped'><tbody>"
var lines = document.getElementById("textarea").value.split("\n");
for (var i = 0; i < lines.length; i++) {
tbl = tbl + "<tr>"
var items = lines[i].split(",");
for (var j = 0; j < items.length; j++) {
tbl = tbl + "<td>" + items[j] + "</td>";
}
tbl = tbl + "</tr>";
}
tbl = tbl + "</tbody></table>";
var divTable = document.getElementById('team');
console.log(tbl);
divTable.innerHTML = tbl;
}
I've used bootstrap for css, you may want to use your own (or not).
Refer jsFiddle here.
Is it possible to place the output of below code in table? The reason is that I want to put headings and nice alignment between firstname and lastname.
Javascript
var nameList = document.getElementById('names');
namearray.push([firstname, lastname]);
namearray.sort();
for(var i = 0; i < namearray.length; i++){
letters += '<li>' + firstname[i] + " " + lastname[i]+ '</li>';
nameList.innerHTML = letters;
}
HTML
<ul id="names">
var nameList = document.getElementById('names');
namearray.push([firstname, lastname]);
namearray.sort();
for(var i = 0; i < namearray.length; i++){
var row = nameList.insertRow(i);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = firstname[i];
cell2.innerHTML = lastname[i];
}
HTML:
<table id="names"></table>
I am trying to insert Form into Table, but <form> tag is not inserted (only input type).
$(function () {
var table = document.getElementById("transport");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
var cell7 = row.insertCell(6);
var cell8 = row.insertCell(7);
var cell9 = row.insertCell(8);
var cell10 = row.insertCell(9);
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell2.innerHTML = "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell10.innerHTML = "</form>";
});
As I mentioned above in the comments.
form start and end tag should be contained within a container.
But you are starting it in one cell and closing in another. That will not work.
Instead you can do this:
cell1.innerHTML = "<form action='/Transport/Grid' id='paieska' method='post'>";
cell1.innerHTML += "<br><br><input class=\"form-control\" id=\"slicplate\" name=\"slicplate\" placeholder=\"Valst. Nr.\" type=\"text\" value=\"\">";
cell1.innerHTML += "</form>";
And so that you know, there are many better ways... This is kind of old school way..(as mentioned again in comments)
var data =[];
function add(){
var fname = document.getElementById("firstname").value,
lname= document.getElementById("lastname").value,
email = document.getElementById("email").value,
age = document.getElementById("age").value,
mobile = document.getElementById("mobile").value,
gen = gender1.checked?gender1.value:gender2.value,
date = document.getElementById("date").value,
adress = document.getElementById("address").value,
city = document.getElementById("city").value,
state = document.getElementById("state").value,
zip = document.getElementById("zip").value,
pan = document.getElementById("pan").value,
tan = document.getElementById("tan").value,
aadhar = document.getElementById("aadhar").value,
obj = {name1:fname,name2:lname,mail:email,aged:age,num:mobile,gend:gen,tarrek:date,
add:adress,place:city,stat:state,zpicode:zip,panc:pan,tanc:tan,aadharc:aadhar}
data.push(obj);
var table = "<table class='table table-striped table-bordered margin' id='delet'>";
table+= "<tr><th>Firstname</th><th>Lastname</th><th>Email</th><th>Age</th><th>Mobile</th><th>Gender</th><th>Date</th><th>Address</th><th>City</th><th>State</th><th>Documents</th><th>Zip</th><th>Pan</th><th>Tan</th><th>Aadhar</th></tr>";
for(var i=0;i<data.length;i++){
table+="<tr><td>"+data[i].name1+"</td><td>"+data[i].name2+"</td><td>"+data[i].mail+
"</td><td>"+data[i].aged+"</td><td>"+data[i].num+"</td><td>"+data[i].gend+
"</td><td>"+data[i].tarrek+"</td><td>"+data[i].add+"</td><td>"+data[i].place+
"</td><td>"+data[i].stat+"</td><td>"+data[i].zpicode+"</td><td>"+data[i].panc+
"</td><td>"+data[i].tanc+"</td><td>"+data[i].aadharc+
"</td></tr>"
}
table+="</table>";
document.getElementById("table-data").innerHTML=table;
};
I'm trying to set a onclick event handler.
from some reason this works:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function init() {
var td = document.getElementById("td");
var table = document.createElement("table");
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = "test";
cell.onclick = function () { alert(); };
td.appendChild(table);
}
</script>
</head>
<body id="td" onload="init()">
</body>
</html>
and when putting it in outside js file it doesn't work:
function buildChessBoard() {
var currentColor = white;
//var table = "<table>";
var table = document.createElement("table");
for (var i = 0; i < chessBoardsize / 8; i++) {
//table += "<tr>";
var row = table.insertRow(i);
for (var j = 0; j < 8; j++) {
//table += "<td class=" + currentColor + "Cell" + " id=" + (i * 8 + j) + " onclick=setCell(this)></td>";
var cell = row.insertCell(j);
cell.innerHTML = "test";
cell.onclick = function () { alert(); };
if (j != 7) {
if (currentColor == white)
currentColor = gray;
else
currentColor = white;
}
}
//table += "</tr>";
}
//table += "</table>";
//chessBoardDiv.innerHTML = table;
chessBoardDiv.appendChild(table);
}
any idea why ?