Develop Reference

Read selected column in javascript from csv

I used a javascript to upload a csv file and did some cleaning,
I would like to only show 1 column out of everything in the csv file, any advice?
Here is my javascript
function Upload() {
var fileUpload = document.getElementById("fileUpload");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
if (cells.length > 1) {
var row = table.insertRow(-1);
for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
HTML
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick="Upload()" />
<div id="dvCSV">
Any advice will be greatly appreciated.
Thanks in advance.

Instead of iterating over all the row cells, just output the one you want:
var targetIndex = rows[0].indexOf("Column name");
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
if (cells[targetIndex]) {
var row = table.insertRow(-1);
var cell = row.insertCell(-1);
cell.innerHTML = cells[targetIndex];
}
}

Unable to print table grid using jQuery

I am unable to print a grid. This is what I am trying to do:
Take the grid size as an input from the user.
Dynamically create the grid based on the input.
Below is a part of the code.
$(document).ready(function() {
$("#grid-input").click(function() {
$(".drawing-area").empty();
var rows = $("#row").val();
var cols = $("#col").val();
if (rows > 0 && cols > 0) {
for (var i = 1; i <= rows; i++) {
var rowClassName = 'row' + i;
$('<tr></tr>').addClass(rowClassName).appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created
for (var j = 1; j <= cols; j++) {
var colClassName = 'col' + j;
$('<td width="20px" height="20px" style="border: 1px solid #000"></td>').addClass(colClassName).appendTo('.rowClassName');
}
}
} else {
alert("You haven't provided the grid size!");
}
});
});
});
<table class="drawing-area">
</table>

There is an error in your code, Last brackets are not required.
Append dom at the end of your code,
Try following code
$(document).ready(function() {
$("#grid-input").click(function() {
$(".drawing-area").empty();
var rows = $("#row").val();
var cols = $("#col").val();
if (rows > 0 && cols > 0) {
for (var i = 1; i <= rows; i++) {
var rowClassName = 'row' + i;
var tr = $('<tr>').addClass(rowClassName);
tr.appendTo('.drawing-area'); //Adding dynamic class names whenever a new table row is created
for (var j = 1; j <= cols; j++) {
var colClassName = 'col' + j;
$('<td width="20px" height="20px" style="border: 1px solid #000">').addClass(colClassName).appendTo(tr);
}
}
} else {
alert("You haven't provided the grid size!");
}
});
});

You can try to save the dynamic table row to a variable $tr first and then add the dynamic table column to that $tr variable like:
$("#grid-input").click(function() {
$(".drawing-area").empty();
var rows = $("#row").val();
var cols = $("#col").val();
if (rows > 0 && cols > 0) {
for (var i = 1; i <= rows; i++) {
var rowClassName = 'row' + i;
// Saving dynamic table row variable
var $tr = $('<tr/>').addClass(rowClassName).appendTo('.drawing-area');
for (var j = 1; j <= cols; j++) {
var colClassName = 'col' + j;
$('<td>'+ (i * j) +'</td>').addClass(colClassName)
// Append the new td to this $tr
.appendTo($tr);
}
}
} else {
alert("You haven't provided the grid size!");
}
});
.drawing-area{font-family:"Trebuchet MS",Arial,Helvetica,sans-serif;border-collapse:collapse;width:100%}
.drawing-area td,.drawing-area th{border:1px solid #ddd;padding:8px}
.drawing-area tr:nth-child(even){background-color:#f2f2f2}
.drawing-area tr:hover{background-color:#ddd}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Row: <input type="number" id="row"><br/>
Col: <input type="number" id="col"><br/>
<button id="grid-input">Save</button><br/><br/>
<table class="drawing-area">
</table>

Load table from saved cookie

I am trying to work out how to save and load data from tables using cookies.
I have been able to save the data to the cookie, but the load function isn't working.
Any idea on how I can make this work?
Basically, I want the cookie to save the data in the table using the "save" button. Then you can mess about with the table and the "load" button will bring it back to how it looked when it was saved.
<html>
<head>
</head>
<body>
<table style="width:100%" id="myTable">
<tr>
<th>Col 1</th>
<th >Col 2</th>
<th >Col 3</th>
<th>Col 4</th>
</tr>
<tr>
<td contenteditable="true" id="left">-</td>
<td contenteditable="true" id="left">-</td>
<td contenteditable="true">-</td>
<td>-</td>
</tr>
</table>
<p id = "paragraph">
</p>
<button type= "submit" class="button" onclick="addRow()">
Add Row
</button>
<button type= "submit" class="button" onclick="addCol()">
Add Col
</button>
<button type= "submit" class="button" onclick="saveTable()">
Save
</button>
<button type= "submit" class="button" onclick="LoadTable()">
Load
</button>
<script>
function addRow()
{
var table = document.getElementById("myTable");
var endOfRows = table.rows.length; // length of rows
var row = table.insertRow(endOfRows);
var endOfCols = table.rows[0].cells.length; // end of cols
for(var i = 0; i< endOfCols; i++)
{
var cell = row.insertCell(i);
cell.innerHTML = "-";
if( i == endOfCols-1)
{
cell.contentEditable = "false";
}
else
{
cell.contentEditable = "true";
}
if(i > 1)
{
cell.style.textAlign = "right";
}
else
{
cell.style.textAlign = "left";
}
}
}
function addCol()
{
var table = document.getElementById("myTable");
var rowLength = table.rows.length;
var endOfCol = table.rows[0].cells.length;
for(var i = 0; i < rowLength; i++)
{
var firstRow = document.getElementById("myTable").rows[i];
var cell = firstRow.insertCell(endOfCol-1);
cell.contentEditable = "true"
if(i == 0)
{
cell.innerHTML = "-";
cell.style.textAlign = "center";
cell.style.backgroundColor = "black";
cell.style.color = "white";
cell.style.fontWeight = "600";
}
else
{
cell.innerHTML = "-";
}
}
}
function saveTable()
{
var table = document.getElementById("myTable");
var noOfRows = table.rows[0].cells.length; // amount of cols
var noOfCols = table.rows.length;
var data = '';
for(var i = 1; i < table.rows.length; i++)
{
for(var j = 0; j < table.rows[0].cells.length-1; j++)
{
data += table.rows[i].cells[j].innerHTML + ",";
}
}
setCookie("data", data, noOfCols, noOfRows, 60);
alert("Cookie Saved");
}
function setCookie(cname, cvalue, noOfRows, noOfCols, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue +";" + expires + ";path=/";
}
function LoadTable()
{
var table = document.getElementById("myTable");
var rowLength = table.rows.length;
var endOfCol = table.rows[0].cells.length;
var data = getCookie("data");
var array = data.split(',');
var count = 0;
for(var i =1;i<rowLength;i++)
{
for(var j = 0; j < endOfCol-1; j++)
{
table.rows[i].cells[j].innerHTML = array[count];
count++;
}
}
}
function getCookie(cname)
{
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++)
{
var c = ca[i];
while (c.charAt(0) == ' ')
{
c = c.substring(1);
}
if (c.indexOf(name) == 0)
{
return c.substring(name.length, c.length);
}
}
return "";
}
PS. I need to do this where the last column is adding up the numbers from the other columns on that row, so we want to skip this column when adding the data, and also not save whatever is in this cell.

how to get the textbox value within table in alert message using javascript

This is the table created dynamically using javascript, I want to show this textbox value in alert message using GetCellValues() function.
function makeTable()
{
row=new Array();
cell=new Array();
row_num=20;
cell_num=4;
tab=document.createElement('table');
tab.setAttribute('id','newtable');
tbo=document.createElement('tbody');
tbo.setAttribute('id','tabody');
for(c = 0;c < row_num; c++)
{
row[c]=document.createElement('tr');
for(k = 0; k < cell_num; k++)
{
cell[k] = document.createElement('td');
if (k > 0)
{
cont=document.createElement("input");
cont.setAttribute('type','text');
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
else
{
cont=document.createTextNode("0" + (c+1));
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
mytable.setAttribute("align", "top-left");
}
Please check the GetCellValues() function, this function is not showing the textbox value in alert message.
function GetCellValues()
{
row=new Array();
cell=new Array();
row_num=20;
cell_num=4;
tab = document.getElementsByTagName('table');
tbo = tab.getElementsByTagName('tbody');
for(c = 0;c < row_num; c++)
{
row = tbo.getElementsByTagName('tr');
for(k = 0; k < cell_num; k++)
{
cell = row.getElementsByTagName('td');
{
cont=cell.getElementsByTagName('input');
{
alert(cont.value);
}
}
}
}
}

I think you need some modification in GetCellvalues function as tab.getElementsByTagName('tbody'); will not get elements having tag name tbody for thi you should use document.getElementsByTagName.
you can check working demo of you code here

If you are getting an alert box with [object HTMLCollection] message in it, then you need to use
alert(cont[0].value) in place of alert(cont.value) at the end of your GetCellValues function.

getElementsByTagName returns collection, you need to iterate through it or assume the first element - apply to row, cell, e.g.
var rows = tbo.getElementsByTagName('tr');
for (var c = 0; c < row_num; c++) {
row = rows[c];
var cells = row.getElementsByTagName('td');
for (var k = 0; k < cell_num; k++) {
cell = cells[k];
// and so on
}
}

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table id="mytable"></table>
<input type="button" onclick="GetCellValues(20, 4);" value="click me" />
<script type="text/javascript">
function makeTable() {
row = new Array();
cell = new Array();
row_num = 20;
cell_num = 4;
tab = document.createElement('table');
tab.setAttribute('id', 'newtable');
tbo = document.createElement('tbody');
tbo.setAttribute('id', 'tabody');
for (c = 0; c < row_num; c++) {
row[c] = document.createElement('tr');
for (k = 0; k < cell_num; k++) {
cell[k] = document.createElement('td');
if (k > 0) {
cont = document.createElement("input");
cont.setAttribute('type', 'text');
cont.setAttribute('value', '');
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
else {
cont = document.createTextNode("0" + (c + 1));
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
mytable.setAttribute("align", "top-left");
}
makeTable();
function GetCellValues(row_num, cell_num) {
var arrInput = document.getElementsByTagName('input');
var index = (row_num - 1) * (cell_num - 1);
alert(arrInput[index].value);
}
</script>
</body>
</html>

A shortcut approach would be to use ID attribute of tag.
Sample TD tag with ID:
<td id="1_1">1st row 1st column</td><td id="1_2">1st row 2nd column</td>
Javascript to get TD with ID:
var row_len=1,col_len=2;
for (r = 0; r< row_len; r++) {
for (c = 0; c < coll_len; c++) {
alert(document.getElementById(r+'_'+c));
}
}

Adding extra dropdown list in specific td on button click

We have a specific functionality where we need to add dynamic rows. In each of the row for the third column there is a button to add combo where it should be able to add extra combo in that cell. We have tried appendChild but is not working. Any idea how to add extra combo boxes. Below is the codes and function to do that is addSubRow.
<HTML>
<HEAD>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
newcell.innerHTML = newcell.innerHTML +"<br> TEST";
//alert(newcell.childNodes);
/*switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].id = "input" + rowCount;
break;
case "checkbox":
newcell.childNodes[0].checked = false;
newcell.childNodes[0].id = "checkbox" + rowCount;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
newcell.childNodes[0].id = "select" + rowCount;
break;
}*
if(newcell.childNodes[0].type=="button")
{
alert("TEST");
newcell.childNodes[0].id=rowCount;
}*/
}
var table = document.getElementById(tableID);
var rows = table.getElementsByTagName('tr');
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
row.name="row"+i;
var rowName = "row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
col.id="col_"+i+"_"+j;
col.name="col_"+i+"_"+j;
var cels = rows[i].getElementsByTagName('td')[j];
var realKids = 0,count = 0;
kids = cels.childNodes.length;
while(count < kids){
if(cels.childNodes[i].nodeType != 3){
realKids++;
}
count++;
}
alert("I : "+i+" "+"J : "+j+" "+"realKids :"+cels.childElementCount);
//alert();
}
}
}
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
var comboBox1 = table.rows[0].cells[2].childNodes[1];
comboBox1 = comboBox1;
tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
//tdID.appendChild(comboBox1);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
if(rowCount <= 1) {
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
var table = document.getElementById(tableID);
for (var i = 0, row; row = table.rows[i]; i++) {
row.id="row"+i;
//iterate through rows
//rows would be accessed using the "row" variable assigned in the for loop
for (var j = 0, col; col = row.cells[j]; j++) {
//iterate through columns
//columns would be accessed using the "col" variable assigned in the for loop
//alert("J : "+j);
col.id="col"+i;
if(j==0)
{
}
else if(j==1)
{
}
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD><INPUT type="text" name="txt"/></TD>
<TD id="col_0_2">
<INPUT type="button" value="Add Combo" onclick="addSubRow('dataTable','col_0_2')" />
<SELECT name="country">
<OPTION value="in">India</OPTION>
<OPTION value="de">Germany</OPTION>
<OPTION value="fr">France</OPTION>
<OPTION value="us">United States</OPTION>
<OPTION value="ch">Switzerland</OPTION>
</SELECT>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>

I'm not sure if this is what you really want, but here's a working function addSubRow function for appending a combobox.
I added some comments to explain what I did:
function addSubRow(tableID,colID) {
var tdID = document.getElementById(colID);
var table = document.getElementById(tableID);
// Create a new combobox element
var new_comboBox = document.createElement('select');
// Define / Add new combobox's attributes here
//new_comboBox.setAttribute('id', 'something');
// ...
// ...
// Add new combobox's options - you may use a 'for' loop...
var option_1 = document.createElement('option');
option_1.setAttribute('value', '1');
var txt_1 = document.createTextNode("OPTION 1");
option_1.appendChild(txt_1);
var option_2 = document.createElement('option');
option_2.setAttribute('value', '2');
var txt_2 = document.createTextNode("OPTION 2");
option_2.appendChild(txt_2);
var option_3 = document.createElement('option');
option_3.setAttribute('value', '3');
var txt_3 = document.createTextNode("OPTION 3");
option_3.appendChild(txt_3);
// ...
// ...
// Appending options to the new combobox
new_comboBox.appendChild(option_1);
new_comboBox.appendChild(option_2);
new_comboBox.appendChild(option_3);
// ...
// ...
// Appending the combobox to the TD
tdID.appendChild(new_comboBox);
}
PS:
Pay attention when defining the combobox's attributes and its options' attributes
I don't think that you need to use the table's ID tableID, in your function. You may simplify your function addSubRow by rmoving this argument?
Hope this helps mate.