We Keep Coding

Parent node undefined in button creation

I'm developing a test build for my project, which includes a lot of data manipulation. I have two buttons inline at the end of the rows, one for editing, and one for committing the changes made.
function editRow(btn) {
var row = btn.parentNode.parentNode;
row.contentEditable = "true";
row.focus();
}
function addRow(tableID, numberOfCells) {
var tbl = document.getElementById(tableID);
//create rows
var newRow = tbl.insertRow(-1);
var i;
for (i = 0; i < numberOfCells; i++) {
newRow.insertCell(0);
}
//assignbuttons
var lastcell = newRow.cells[numberOfCells - 1];
addEditButton(lastcell);
addCommitButton(lastcell);
}
function addEditButton(context) {
var button = document.createElement("input");
button.type = "button";
button.value = "Edit";
button.onclick = editRow(this);
context.appendChild(button);
}
The user will press the new row button, and then an empty row will appear along with the two buttons.
I am getting the error:
Uncaught TypeError: Cannot read property 'parentNode' of undefined
at editRow (js.js:97)
at addEditButton (js.js:123)
at addRow (js.js:115)
at HTMLButtonElement.onclick (index.html:36)

There are 2 problems I can see.
button.onclick = editRow(this); the this would result in undefined (in strict mode) in that scope. You can probably fix this by sending in the button element
button.onclick = editRow(button);
More reading on this in a function scope
Also you are not creating a row with a td element to place the button in. So btn.parentNode.parentNode is not the row element as you are expecting
Try this
function editRow(btn) {
var row = btn.parentNode.parentNode;
row.contentEditable = "true";
row.focus();
}
function addRow(tableID, numberOfCells) {
var tbl = document.getElementById(tableID);
//create rows
var newRow = tbl.insertRow(-1);
var i;
for (i = 0; i < numberOfCells; i++) {
newRow.insertCell(0);
}
//assignbuttons
var lastcell = newRow.cells[numberOfCells - 1];
addEditButton(lastcell);
//addCommitButton(lastcell);
}
function addEditButton(context) {
var row = document.createElement("row");
var td = document.createElement("td");
var button = document.createElement("input");
button.type = "button";
button.value = "Edit";
td.appendChild(button);
row.appendChild(td);
context.appendChild(row);
button.onclick = editRow(button);
}
addRow("myTable", 2)
<table id="myTable">
</table>

function addRow(tableID, numberOfCells) {
var tbl = document.getElementById(tableID);
var tableHTML = $("#" + tableID).html();
if(numberOfCells === 5) {
$("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
}
if(numberOfCells === 4) {
$("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
}
if(numberOfCells === 3) {
$("#" + tableID).html(tableHTML + "<tr id=\"bikeTableBike_new\"><td>-</td><td>-</td><td><button id=\"editBikeButton\" class=\"tableButtons\" onclick=\"editRow(this)\"><img src=\"images/edit.png\"/></button><button id=\"deleteBikeButton\" class=\"tableButtons\" onclick=\"commitRow(this)\"><img src=\"images/commit.png\"/></button></td></tr>");
}
}

Button and radio button inside excel CSV after file upload using javascript

A excel CSV (comma seperated value) file is uploaded initially. This CSV file is represented as a table format in an html page. Here, I need to add a radio button, button etc,along with the table formatted representation. Is this possible without usage of database?.
Thanks in advance.
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 radio = document.createElement("radio");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = table.insertRow(-1);
var cells = rows[i].split(",");
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);
dvCSV.appendChild(radio);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
I had created an element 'radio' inside function also appended as a child, but it doesn't displays it. My requirement is that, when each row of CSV file is placed, I need to place a radio and button there.(radio for selecting and button for editing the row element and save file).

This line
var radio = document.createElement("radio");
means <radio></radio>. However, there is no radio tag. It's <input type="radio">:
var radio = document.createElement("input");
radio.type = 'radio';
To "group" all radio buttons together, you also need to give them the same name:
radio.name = 'radio';
And if you say you need a button too, then create one:
var button = document.createElement('button');
button.textContent = 'Click me';
But most importantly, if you need them for every row, then put them there, and not somewhere else:
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 row = table.insertRow(-1);
var cells = rows[i].split(",");
for(var j = 0; j < cells.length; j++)
{
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
// Here:
var radio = document.createElement("input");
radio.type = 'radio';
radio.name = 'radio';
var button = document.createElement('button');
button.textContent = 'Click me';
var cell = row.insertCell(-1);
cell.appendChild(radio);
cell.appendChild(button);
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
}

Checkbox checked property is undefined

I am adding rows and cols to html table programatically using Javascript:
for (var i = 0; i < results.length; i++) {
table = document.getElementById("EntityRecords");
rowCount = table.rows.length;
row = table.insertRow(rowCount);
row.id = results[i].LeadId;
row.className = "EntityRecordsRow";
cell1 = row.insertCell(0);
element = document.createElement("input");
element.type = "checkbox";
element.name = "chkbox[]";
cell1.appendChild(element);
cell1.className = "EntityRecordsCol";
cell2 = row.insertCell(1);
cell2.innerHTML = results[i].FirstName + " " + results[i].LastName;
}
On button click event, I need to find selected checkbox. I am reading the table cells using below code but checkbox cell checked property is undefined:
function OnRecordSelectionBtnClick() {
var table = document.getElementById("EntityRecords");
for (var i = 0, row; row = table.rows[i]; i++) {
var col = row.cells[0];
if (col.checked) {
var selectedText = row.cells[1].innerHTML;
alert(selectedText);
}
}
}
Any suggestions?

if ( col.firstElementChild.checked ), not if ( col.checked ). col is td element and its first child is input that has checked property.

Javascript Dictionary problems

I am creating a javascript based "favourite assignment" list for my photo app which I have created using phonegap.
I'm basing it on a "to-do list" tutorial code and have tried to adapt it to my purposes.
There are two variables: the title (text) and the link (text2)
It works great in a browser, and on first launch in the app.
But on refresh or relaunch, I dont think it's saving the link variable to the dictionary.
would appreciate any guidance with the code:
<script type="text/javascript" language="JavaScript">
//Create a new To-Do
function createNewToDo()
{
var todoDictionary = {};
//Prompt the user to enter To-Do
var todo="FAST SHUTTER SPEEDS";
var todolink="#fastshutter";
if (todo!=null)
{
if (todo == "")
{
alert("To-Do can't be empty!");
}
else
{
//Append the new To-Do with the table
todoDictionary = { check : 0 , text : todo , text2 : todolink};
addTableRow(todoDictionary,false);
}
}
}
//Add a row to the table
var rowID = 0;
function addTableRow(todoDictionary, appIsLoading)
{
rowID +=1;
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
//Set up the CheckBox
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "deleteButton";
element1.value = "X";
element1.setAttribute("onclick","deleteSelectedRow(this)");
element1.className = "deleteButton";
cell1.appendChild(element1);
//Set up the View Button
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "viewButton";
element2.value = todoDictionary["text"];
var link = todoDictionary["text2"];
element2.id = rowID;
element2.onclick=function(){ window.location.hash = link; };
element2.className = "viewButton";
cell2.appendChild(element2);
//Save & Update UI
saveToDoList();
if (!appIsLoading)
alert("Assignment Added To Favourite List!");
}
//Deletes current row
function deleteSelectedRow(deleteButton)
{
var p=deleteButton.parentNode.parentNode;
p.parentNode.removeChild(p);
saveToDoList();
}
function saveToDoList()
{
//Create a todoArray
var todoArray = {};
var checkBoxState = 0;
var textValue = "";
var text2Value = "";
//Get current table
var table = document.getElementById("dataTable");
var rowCount = table.rows.length;
if (rowCount != 0)
{
//Loop through all rows
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
//Add checkbox state
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked)
{
checkBoxState = 1;
}
else
{
checkBoxState= 0;
}
//Add text data
var textbox = row.cells[1].childNodes[0];
textValue = textbox.value;
//Fill the array with check & text data
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue
};
}
}
else
{
todoArray = null;
}
//Use local storage to persist data
//We use JSON to preserve objects
window.localStorage.setItem("todoList", JSON.stringify(todoArray));
}
function loadToDoList()
{
//Get the saved To-Do list array by JSON parsing localStorage
var theList = JSON.parse(window.localStorage.getItem("todoList"));
if (null == theList || theList=="null")
{
deleteAllRows();
}
else
{
var count = 0;
for (var obj in theList)
{
count++;
}
//Clear table
deleteAllRows();
//Loop through all rows
for(var i=0; i<count; i++)
{
//Add row
addTableRow(theList["row"+i],true);
}
}
}

It appears that in the saveToDoList function you aren't adding your text2 value to the array of objects that's saved to localStorage:
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue
};
Should be:
todoArray["row"+i] =
{
check : checkBoxState,
text : textValue,
link : // get the value of your link
};
Since you haven't posted the associated HTML I cannot tell you how to get the value of the link

Button click in each row in a dynamically created table to retrieve a column value of the corresponding row

//Button click in each row in a dynamically created table to retrieve a column value of the corresponding row
var rowCount = result.rows.length;// to count numrows coming from database
for(var j=1; j<=rowCount; j++)
{
var row = result.rows.item(j-1); // creating rowindex in the table
exercise =row.Exercise; // value from database
time= row.Time; // value from database
userid = row.UserId // value from database
var table = document.getElementById("check"); // table id
var row1 = table.insertRow(j); // Insert Row To Table
var cell1 = row1.insertCell(0);
var element1 = document.createElement("input");
element1.type = "text";
element1.value = exercise;
cell1.appendChild(element1);
var cell2 = row1.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.value = time;
cell2.appendChild(element2);
var cell3= row1.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.value = "edit";
var cell4= row1.insertCell(3);
var element4= document.createElement("input");
element4.value = userid;
cell4.appendChild(element4);
cell4.style.dispalay="none";
element3.addEventListener('click', function () {
alert('event fired!');
// get the userid value of the clicked button as an alert
});
}

First of all assign each of the elements a unique id. For example:
var cell4= row1.insertCell(3);
var element4= document.createElement("input");
element4.type = "text";
element4.value = userId; // from DB
element4.id = "element4-" + j;
cell4.appendChild(element4);
Assign your edit button id = j.
var cell3= row1.insertCell(2);
var element3 = document.createElement("input");
element3.type = "button";
element3.value = "edit";
element3.id = j;
cell3.appendChild(element3);
Then assign onclick handler to your edit button inside the for loop like this:
element3.onclick=doSomething;
Create a function doSomething()
function doSomething() {
for(var j=1; j<=rowCount; j++)
{
var value = document.getElementById("element" + j + "-" + this.id).value;
alert(value);
}
}
Hope this helps.

Try to give some row id and class to the columns then you can use
jQuery(".your_class").click(function(){
var column_value = jQuery(this).html();
});
did you mean something like this ?