We Keep Coding

Dynamically generated table with checkbox overflowing the parent div element

I am trying to create a table dynamically using javascript. I want each table to have a checkbox beside it. So, I have written the following code:
JAVASCRIPT
label_submit_btn.addEventListener("click", function(event){
event.preventDefault();
var formInputs = document.getElementById("label_query_form").querySelectorAll("input");
validation = validateForm(formInputs);
if(validation[0]){
var label_query_form_action = document.getElementById("label_query_form").getAttribute("action");
var label_val = document.getElementById("label_no")
query_db("label_data_div", label_query_form_action, label_val, true, "label_query_row");
// var chk_boxes = document.getElementsByClassName("form-check-input");
// document.getElementById("data_delete_btn").disabled = false;
}
else{
alert(validation[1])
}
});
function query_db(output_div, form_action, form_data, add_checkbox, row_class){
document.getElementById(output_div).innerHTML = ""
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append(form_data.name, form_data.value)
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
let response_data = JSON.parse(this.responseText);
let table_data = JSON.parse(response_data);
table_data = create_table_from_json(table_data, add_checkbox, row_class);
document.getElementById(output_div).innerHTML += table_data;
}
}
xhr.open("POST", form_action, true);
xhr.send(formData);
}
function create_table_from_json(table_data, add_checkbox, row_class){
var table_rows = "";
for (var i = 0; i < table_data["columns"].length; i++) {
table_rows += "<th>" + table_data["columns"][i] + "</th>";
}
table_rows += "<th>Select</th>";
console.log(table_rows);
table_rows = "<tr>" + table_rows +"</tr>";
for (var i = 0; i < table_data["data"].length; i++) {
trow = ""
for (var j = 0; j < table_data["columns"].length; j++) {
trow += "<td class="+ table_data["columns"][j] +">" + table_data["data"][i][j] + "</td>";
}
if(add_checkbox == true){
trow += '<td><input type="checkbox" class="form-check-input"/> </td>';
}
table_rows += "<tr class="+ row_class + ">" + trow +"</tr>";
}
return "<table><tbody>" + table_rows + "</table></tbody>";
}
HTML
<div class="container" id="label_data_div" style="height: 200px;overflow: scroll;"></div>
Now, while rendering the page, all of the checkboxes are overflowing outside of the div element(see image).

Module name "request" has not been loaded yet for context: _. Use require([])

I'm trying to load a function that returns a JSON to me on an HTML page in order to create a table.
Is is there a way to be able to launch that function and the JSON body of return insert it in a variable present in the HTML to be able to transform it into a table?
odatafunction.js
let Request = require("request");
const EventEmitter = require("events").EventEmitter;
const risultato = new EventEmitter();
let keys;
function createArrayKey(array, object) {
let key = Object.keys(object);
for (let i = 0; i < Object.keys(object).length; i++) {
if(i === 0){
array += object[key[i]];
}else{
array += "," + object[key[i]];
}
}
return array;
}
function removeDuplicates(array, key) {
let lookup = {};
let result = [];
array.forEach(element => {
if (!lookup[element[key]]) {
lookup[element[key]] = true;
result.push(element);
}
});
return result;
}
function check_missing_value(new_object2, max_key) {
var breakLoop = false;
var miss;
for(var i=0; i<Object.keys(new_object2).length ; i++){
miss = -1;
for(var j = 0; j < Object.keys(max_key).length && !breakLoop ;j++){
//console.dir(max_key[j]);
if(!Object.keys(new_object2).includes(max_key[j])){
new_object2[max_key[j]]="NULL";
breakLoop = true;
}
}
}
return new_object2;
}
function retriveData(){
const http = Request("https://services.odata.org/V3/OData/OData.svc/PersonDetails?$format=json",
(error, response, body) => {
if (error) {
return console.dir(error);
}
let json_body = JSON.parse(body);
let value_json = json_body.value;
let new_json = [];
var html = '<table class="table table-striped">';
html += '<tr>';
//console.dir(Object.keys(value_json[0]));
let max_key = (Object.keys(value_json[0]));
keys = max_key;
for (var i = 0; i < Object.keys(keys).length; i++) {
html += '<th>' + keys[i] + '</th>';
}
html += '</tr>';
for (let i = 0; i < Object.keys(value_json).length; i++) {
let new_object2 = {};
let element = value_json[i];
html += '<tr>';
for (var j = 0; j < Object.keys(element).length; j++) {
var temp = Object.keys(element);
switch (typeof element[temp[j]]) {
case "object":
var array = createArrayKey("", element[temp[j]]);
new_object2[temp[j]] = array;
html += '<td>' + array + '</td>';
break;
case "number":
new_object2[temp[j]] = element[temp[j]];
html += '<td>' + element[temp[j]] + '</td>';
break;
case "string":
new_object2[temp[j]] = element[temp[j]];
html += '<td>' + element[temp[j]] + '</td>';
break;
case "boolean":
new_object2[temp[j]] = element[temp[j]];
html += '<td>' + element[temp[j]] + '</td>';
break;
case "bigint":
new_object2[temp[j]] = element[temp[j]];
html += '<td>' + element[temp[j]] + '</td>';
break;
}
}
html += '<tr>';
new_object2 = check_missing_value(new_object2, max_key);
new_json.push(new_object2);
}
html += '</table>';
removeDuplicates(new_json, 'PersonID');
risultato.data = new_json;
risultato.emit('update');
console.dir(html);
});
risultato.on('update', function () {
//console.log(risultato.data); // HOORAY! THIS WORKS!
});
return risultato.data;
}
define({
results : retriveData()
});
module.exports.retriveData = retriveData;
index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
//res.sendFile('index.js');
});
module.exports = router;
index.ejs
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-main="javascripts/odatafunction.js" src="requirejs.js"></script>
<script type="text/javascript" >
var trs = require(function (require){
var test = require("javascripts/odatafunction.js");
return{
myfunc: function () {
test.retriveData();
}
}
});
odatafunction = require(["odatafunction"]);
var data = odatafunction.retriveData;
$(document).ready(function () {
var html = '<table class="table table-striped">';
html += '<tr>';
var flag = 0;
$.each(data[0], function (index, value) {
html += '<th>' + index + '</th>';
});
html += '</tr>';
$.each(data, function (index, value) {
html += '<tr>';
$.each(value, function (index2, value2) {
html += '<td>' + value2 + '</td>';
});
html += '<tr>';
});
html += '</table>';
$('body').html(html);
});
</script>
</body>
</html>

Parse ASCII as plain text exporting to Excel from js

Having a bit of trouble when exporting a spreadsheet. The tool is to create tracking links, everything works fine except when the link contains ascii characters. For example, someurl.com&trackingparameter%3d.
When this happens, it all works within the app, but when exported to the spreadsheet it would read as someurl.com&trackingparameter=.
Wondering how I can parse these ascii characters as plain text on the export. Thanks in advance for any assistance.
Best,
Erik
<script>
$(document).ready(function() {
$("#btnExport").click(function(e) {
e.preventDefault();
var data_type = 'data:application/vnd.ms-excel';
var table_div = document.getElementById('wrapper');
var table_html = table_div.outerHTML.replace(/ /g, '%20');
var a = document.createElement('a');
a.href = data_type + ', ' + table_html;
a.download = 'exported_URLS_' + Math.floor((Math.random() * 9999999) + 1000000) + '.xls';
a.click();
});
});
</script>
<script type="text/javascript">
function createTable() {
var deletebutton = '<button class="delete uk-button uk-button-danger" id="delete">delete</button>';
var tbody = '';
var descripdata = '';
var simpleURLdata = '';
var description = document.getElementById('description').value;
var simpleURL = document.getElementById('simpleURL').value;
var baseURL = document.getElementById('baseURL').value;
var s1 = document.getElementById('s1').value;
var s2 = document.getElementById('s2').value;
var s3 = document.getElementById('s3').value;
var s4 = document.getElementById('s4').value;
var ts = document.getElementById('ts').value;
var hdr = document.getElementById('hdr').value;
var hdrid = document.getElementById('hdrid').value;
var dmhdr = document.getElementById('dmhdr').value;
var utm_source = document.getElementById('utm_source').value;
var utm_medium = document.getElementById('utm_medium').value;
var utm_campaign = document.getElementById('utm_campaign').value;
var utm_category = document.getElementById('utm_category').value;
tbody += '<td>';
tbody += baseURL;
if (s1 != '') {
tbody += '&s1=';
tbody += s1;
}
if (s2 != '') {
tbody += '&s2=';
tbody += s2;
}
if (s3 != '') {
tbody += '&s3=';
tbody += s3;
}
if (s4 != '') {
tbody += '&s4=';
tbody += s4;
}
if (ts != '') {
tbody += '&ts=';
tbody += ts;
}
if (hdr != '') {
tbody += '&hdr='
tbody += hdr;
}
if (dmhdr != '') {
tbody += '&dmhdr=';
tbody += dmhdr;
}
if (hdrid != '') {
tbody += '&hdrid=';
tbody += hdrid;
}
if (utm_source != '') {
tbody += '&utm_source=';
tbody += utm_source;
}
if (utm_medium != '') {
tbody += '&utm_medium=';
tbody += utm_medium;
}
if (utm_campaign != '') {
tbody += '&utm_campaign=';
tbody += utm_campaign;
}
if (utm_category != '') {
tbody += '&utm_category=';
tbody += utm_category;
}
tbody += '</td>';
descripdata += '<td>';
if (description != '') {
descripdata += description;
}
descripdata += '</td>';
simpleURLdata += '<td>';
if (simpleURL != '') {
simpleURLdata += simpleURL;
}
simpleURLdata += '</td>';
var table = document.getElementById('urls');
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = tbody;
var cell2 = row.insertCell(1);
cell2.innerHTML = descripdata;
var cell3 = row.insertCell(2);
cell3.innerHTML = simpleURLdata;
var cell4 = row.insertCell(3);
cell4.innerHTML = deletebutton;
}
</script>

You can use javascript native functions escape(), encodeURI() or encodeURIComponent() if you want to retain %3d as %3d.
Further help regarding these can be found at When are you supposed to use escape instead of encodeURI / encodeURIComponent?

How to get row and column values, of a table, on click by a event listener

I have two dynamic tables, one with the results of a sum and on other with the sum value, example: 4 and 2+2.
I have the following code in javascript where I click on the table with sum value, and then click on the respective sum value, and when I click on the right sum value, I want to know the value of the index on the column and row of the cell that was clicked.
I have eventListeners to create the clickable cells, and then compare with the cells of the other table.
Here is the code for the clickable cell of the first table:
var handler = function(e){if (choiceFlagElement != null) {
choiceFlagElement.style.background = 'green';
}
choiceFlagElement = e.target;
choiceFlagNumber = parseInt(e.target.innerHTML);
e.target.style.background = 'green';
}
and then I have this part for compare to the above cell:
var handler2 = function(e){
if (choiceFlagElement == null) {
return;
}
if (choiceFlagNumber == eval(e.target.innerHTML)) {
e.target.style.background = 'green';
e.target.style.visibility= 'hidden';
choiceFlagElement.style.visibility = 'hidden';
pontuacao();
inicio=Date.now();
count++;
choiceFlagNumber.target.innerHTML="-1";
}
}
Here is where I create the two table:
function criartabela(tamanho){
var tbl = "<table id=tabela>";
var tbl2 = "";
var resultados = new Array();
var f=0;
for (var ri = 0; ri < tamanho ; ri++) {
tbl += "<tr>";
for (var ci = 0; ci < tamanho; ci++) {
contas();
tbl += "<td class='cel"+tamanho+"' id=x visibility=visible >" + a + "+" + b + "</td>";
var total = a+b;
resultados[f]=total;
f=f+1;
}
}
resultados.sort(function(a,b){return a - b});
for(y=0; y<resultados.length; y++){
tbl2 += "<div class='resul"+tamanho+"' id=total >"+ resultados[y] + "</div>";
}
tbl += "</tr>";
tbl += "</table>";
document.getElementById("tabelap").innerHTML = tbl;
document.getElementById("resposta").innerHTML = tbl2;
}

Dynamically creating an html table with Javascript

I am trying to create a table based on user input (actually two or three tables depending on the user input..) using Javascript, I am very much native to PHP and have already got this working in PHP, however i would like the user to be able to see the table before the query it. I found a script on here that partially did what I wanted and have attempted to edit it (I found it surprisingly similar to PHP) Basically it calculates the total amount of cells (ports) splits it by rows and columns, the "super" column is used if the user would like it to be split into multiple tables, which align next to each other, hence the div tag. Here's my JS:
<html>
<head>
<script type="text/javascript">
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for( var i=0; i<num_super; i++){
var theader = '<div><table border="1">\n';
for(u=1; u<=num_row; u++){
tbody += '<tr>';
for( var j=0; j<colStart; j++)
{
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>'
}
tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>
<body>
<form name="tablegen">
<label>Ports: <input type="text" name="ports" id="ports"/></label><br />
<label>Super Columns: <input type="text" name="super" id="super"/></label><br />
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Columns: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>
</body>
</html>
Here is what the final output looks like after it has been processed by PHP (ports:24, col:6, rows:2, super:2):
Here is a js fiddle that I threw together:
http://jsfiddle.net/9SnLB/
Currently, when I click the button nothing happens, but, I suppose that is my first issue, but am I going about the setup correctly? Why wont the button run the function?

Two mistakes. One you didn't close the function bracket, ie a missing } at the end. The second is you used $row instead of the variable you created num_rows. For some reason it doesn't work in the fiddle, it does however work locally. The fiddle is saying the createTable function is undefined.
function createTable()
{
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for( var i=0; i<num_super; i++){
var theader = '<div><table border="1">\n';
for($u=1; $u<=num_rows; $u++){
tbody += '<tr>';
for( var j=0; j<colStart; j++)
{
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>'
}
tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
}

var table = [["a1","a2","a3"]["b1","b2","b3"]["c1","c2","c3"]];
for(x = table.length;x > 0;x--) {
document.write("<tr>");
for(y = table[x].length;y > 0;y--) {
document.write("<td>"+y+"</td>");
}
document.write("</tr>");
}
Sorry if the syntax is wrong. You get the idea.

You need to change your jsFiddle framework to "no wrap (head)" and correct errors in the javascript. "no wrap (head)" will allow access the function. The "for ($u=1" loop is missing the close brace and $row should be num_rows. The "for (j=0" loop is missing a semicolon at the last "tbody=".
here's the corrected js.
function createTable() {
var num_ports = document.getElementById('ports').value;
var num_super = document.getElementById('super').value;
var num_rows = document.getElementById('rows').value;
var num_cols = document.getElementById('cols').value;
var tbody = '';
var colStart = num_cols / num_super;
for (var i = 0; i < num_super; i++) {
var theader = '<div><table border="1">\n';
for ($u = 1; $u <= num_rows; $u++) {
tbody += '<tr>';
for (var j = 0; j < colStart; j++) {
tbody += '<td>';
tbody += 'Cell ' + i + ',' + j;
tbody += '</td>';
}
}
tbody += '</tr>\n';
}
var tfooter = '</table></div>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}