We Keep Coding

Javascript - Listener executing on assignment

So, I'm currently working on a HTML page that displays a table with an editable text box and a delete button for the row for every quote in a list. The list is fetched from a stored file, so I need to dynamically generate this table and its rows every time I fetch it. However, when this code runs, the table generated is empty, because when the listener is added, the delete row function executes and just removes the row right after it's added.
for (var i = 0; i < quotesArray.length; i++) {
//Insert a new row into the table.
var newQuoteRow = quoteList.insertRow(-1);
var cellOne = newQuoteRow.insertCell(0);
var cellTwo = newQuoteRow.insertCell(1);
//Insert editable text boxes for a quote into the row.
var quoteInput = document.createElement('input');
quoteInput.value = quotesArray[i];
quoteInput.className = "quote";
cellOne.appendChild(quoteInput);
//Put a delete button at the end of the row.
var deleteQuoteButton = document.createElement('button');
deleteQuoteButton.innerHTML = "x";
cellTwo.appendChild(deleteQuoteButton);
deleteQuoteButton.addEventListener('click', deleteCurrentQuoteRow(deleteQuoteButton));
}
});
}
function deleteCurrentQuoteRow(buttonToDelete) {
var currentRow = buttonToDelete.parentNode.parentNode; //get the grandparent node, which is the row containing the cell containing the button.
currentRow.parentNode.removeChild(currentRow); //delete the row in the table
}
From what I understand, this problem occurs because the function linked to in the addEventListener method has a parameter, which causes it to execute immediately instead of waiting for a click. However, I can't think of a way to implement this without passing the button being clicked as the parameter, because then I won't know which row to delete. How can I fix this so that the table will actually populate, and the delete button will actually delete a row?

Currently you are invoking the function deleteCurrentQuoteRow and assigning its return value which is undefined as event listener.
Use
deleteQuoteButton.addEventListener('click', function(){
deleteCurrentQuoteRow(this); //Here this refers to element which invoke the event
});
OR, You can modify the function deleteCurrentQuoteRow as
function deleteCurrentQuoteRow() {
var currentRow = this.parentNode.parentNode; //get the grandparent node, which is the row containing the cell containing the button.
currentRow.parentNode.removeChild(currentRow); //delete the row in the table
}
Then you can just pass the function reference as
deleteQuoteButton.addEventListener('click', deleteCurrentQuoteRow);

creating a 2 column table dynamically using jquery

I am trying to generate a table dynamically using ajax call. To simplify things i have just added my code to js fiddle here -> http://jsfiddle.net/5yLrE/81/
As you click on the button "HI" first two columns are created properly.. but some how as the td length reaches 2 . its not creating another row. The reason is that when i do find on the table elements its actually retrieving the children table elements. Can some one pls help.
I want a two column table.. Thank you.
sample code:
var tr = $("#maintable tbody tr:first");
if(!tr.length || tr.find("td:first").length >= max) {
$("#maintable").append("<tr>");
}
if(count==0) {
$("#maintable tr:last").append("<td>hi"+content+"</td>");
}

Basically the matching of descendants was allowing for great great grandchildren etc. Just needed to make the matching more specific.
JSFiddle: http://jsfiddle.net/TrueBlueAussie/5yLrE/91/
max = 2
$("button").click(function () {
var content = $('#template').html();
var $table = $("#maintable");
var tr = $table.find(">tbody>tr:last");
if (!tr.length || tr.find(">td").length >= max) {
// Append a blank row
tr = $("<tr>");
$table.append(tr);
}
tr.append("<td>hi " + content + "</td>");
});
This one always targets the last row and adds a row if it does not exists at all (or there are too many divs already) which is what I gather you intended.
I also used the templating I suggested to separate messy HTML strings from the code.

You will want to check the length of the table cells before incrementing a new table row. After you have reached your max column length, reset the row and start over.
JSFiddle
max_columns = 2;
count=0;
$("button").click(function() {
var content='column';
if(count==max_columns||!$('#maintable tr').length){
$("#maintable").append("<tr>");
count=0;
}
if(count!=max_columns)
$("#maintable tr:last").append("<td>"+content+"</td>");
else
$("#maintable tr:first").append("<td>"+content+"</td>");
count++;
});

Clear content of cell with JavaScript

I want to dynamically change the content of the cells of an entire column. Currently I loop over the rows and append my element.
for (var i = 0, row; row = table.rows[i]; i++) {
var cell = row.cells[1];
cell.appendChild(element.cloneNode(true))
This works fine. But the problem is, if I call this function again, an additional child is added. So each time I call the function an element is added. Is there a way to clear the content of the cell before I append my element or a way to update the content of the cell?

try this:
while (cell.hasChildNodes()) {
cell.removeChild(cell.lastChild);
}

Try this:
for (var i = 0, row; row = table.rows[i]; i++) {
var cell = row.cells[1];
cell.innerHTML="";
cell.appendChild(element.cloneNode(true))

Jquery - Get previous value row in table

i have dynamic simple table like:
I try to get previous value cell when i click edit button.
Example: when i click first edit button that will alert('a1')
when i click second edit button that will alert('a2')
i try with
$('.edit').click(function(){
alert($(this).parents('tr').prev().children().eq(1).text());
});
it's working well with first edit button because previous row that has one row.
And it't not working with second edit button.
How can i do it (by dynamic previous row) http://jsfiddle.net/bWjbj/
ps: i'm working with next row with
alert($(this).parents('tr').nextAll(':eq(' + ($(this).parent().siblings().eq(0).attr("rowspan")-1) + ')').children().eq(1).text());

http://jsfiddle.net/mblase75/XGdkD/
The problem is that for the second Edit button, the previous table row isn't the row you want -- you want the row two more before that, because that's where the rowspans begin.
Or, to be general: you want the table row belonging to the previous Edit button. In the case of the first edit button, though, you just want the previous row.
So, in code:
$('.edit').click(function () {
var idx = $('.edit').index(this); // which Edit button is this?
if (idx > 0) { // first button
var $tr = $('.edit').eq(idx-1).closest('tr'); // previous row
} else { // not first button
var $tr = $(this).closest('tr').prev('tr'); // previous Edit button's row
}
var $td = $tr.find('td:nth-child(2)'); // second <td> of the row
alert($td.text());
});
Compact version of the same code:
$('.edit').click(function () {
var idx = $('.edit').index(this),
$tr = (idx) ? $('.edit').eq(idx-1).closest('tr') : $(this).closest('tr').prev('tr'),
$td = $tr.find('td:nth-child(2)');
alert($td.text());
});

How to tell if a row contains cells with textbox with javascript

I have a table that is built dynamically from a user specified query to a database and I want to give the user the option to edit the data from the generated HTML table. When the user double clicks on the row containing the data they want to edit, I have a new row appear underneath it with textboxes for them to submit new values. Right now, when the user clicks double clicks two rows, both rows of textboxes remain in the table and I want to delete the first row before the second shows up. My question is, what is a good was to find table rows containing textboxes so that I can perhaps use JavaScript's deleteRow() function?
I'm generating rows like so:
function editRow(row) {
var table = document.getElementById("data");
var newRow = table.insertRow(row.rowIndex + 1);
var cell;
for (var i = 0; i < row.childNodes.length; i++) {
cell = newRow.insertCell(i);
textBox = document.createElement("input");
textBox.type = "text";
textBox.placeholder = row.childNodes[i].innerHTML;
textBox.style.textAlign = "center";
textBox.style.width = "90%";
cell.appendChild(textBox);
}
}
and the only way I can I can think of doing it is something like (pseudo code):
for all table rows
if row.childNodes.innerHTML contains 'input'
deleteRow(index)
Thanks for the help

You could use jQuery. Assuming row is a DOM element, this should work:
var textBoxes = $("input:text", row);

i guess the easiest option would be to add the created rows to an array. This way you simply have to delete the rows inside the array and not iterate through the whole table.

I ended up doing the following:
function editRow(row) {
var table = document.getElementById("data");
clearExistingTextBoxes(table);
...
}
function clearExistingTextBoxes(table) {
var tBoxRow = table.getElementsByTagName("input");
if (tBoxRow.length > 0) {
tBoxRow = tBoxRow[0].parentNode.parentNode;
table.deleteRow(tBoxRow.rowIndex);
}
}
Assuming I'm only going to be clearing one row at a time.