Clear content of cell with JavaScript - 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))

Related

Finding cell value of dynamically generated table row

I am trying to delete an array record based on what table row is clicked.
This function adds a button to a row and appends it to the end of the table
function addButtons(table, tr){
var delBtn = document.createElement("button");
delBtn.innerHTML = "×"
delBtn.onclick = deleteBu(tr)
tr.appendChild(delBtn);
table.children[1].appendChild(tr)
}
The function below is meant to delete an array record based on the row clicked. For example, in row 1, the first cell is "45". Based on this, the record is deleted if it is found in the array storageProblem.
Here is what I have so far. The issue is because I am using tr as the action listener, so simply clicking on the row will delete the row, it is not localized to the button. But using tr is the only way I have found to get the first td of a row.
function deleteBu(tr){
$(tr).click(function(){
var value=$(this).find('td:first').html();
for(i = 0; i < storageProblem.length; i++){
if(value == storageProblem[i][0]){
storageProblem.splice(i, 14)
loadCallProblemTable()
}
}
})
}
I'm not sure if I've understood your question right but maybe try this solution:
function deleteBu(x) {
var Index = $(x).closest('tr').index();
console.log("Row index: " + Index);
}

Insert cells in specific column in Table

I have a Table with 3 thead.
I'm trying to insert cells in the second column.
I put the insertCell function as follows:
cell = row.insertCell(2);
but it doesn't work.
This is my code :
function add() {
j++;
count++;
var table = document.getElementById('table0');
var row = table.insertRow(-1);
cell = row.insertCell(1);
text = count;
cell.appendChild(document.createTextNode(text));
}
Here is my JSFiddle code
Can anyone help me?
The index you pass to row.insertCell(index) must be less than or equal to row.cells.length. In your case, since row is a brand new row, row.cells.length is 0, so you must pass 0 or -1.
Consider the HTML for your table. How would you write the HTML for a row containing a single cell, in the 2nd column? You can't do it! If there is a cell in the second column, there must also be a cell in the first column.
To create a new row in table, with a cell in the second column:
var row = table.insertRow(-1);
var firstCell = row.insertCell(-1);
var secondCell = row.insertCell(-1);
To give it the appearance of having no cell in the first column, use CSS to git rid of the border and any other styles that make it look like a cell:
firstCell.className = "empty";
.empty {
border: 0 none;
}
http://jsfiddle.net/54pmo8oy/14/
I'm not clear whether this is what you're trying to do, but hopefully it's close. Clicking the button will add a new cell to the second column with each click:
(function () {
var count = 1,
add = function () {
var table = document.getElementById('table0'),
row = table.rows[0],
cell = row.insertCell(1),
text = count;
cell.innerHTML = text;
count++;
};
document.getElementsByTagName('button')[0].addEventListener('click', function () {
add();
});
add();
}());
JSFiddle

looping javascript didn't work

I'm trying to get data from app engine datastore using javascript and json. it's also allowed jsonp service, here the javascript code:
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
$('#date').text(date);
$('#nohp').text(user);
$('#content').text(content);
}
});
you can also check it here: http://jsfiddle.net/YYTkK/7/
unfortunately, it just retrieve 1 latest data from the datastore. am I doing something wrong with this code?
thanks in advance.
You're not appending elements, but simply changing the value of the same 3 elements in question three times. So you simply overwrite the value you put into it the time before. The easiest way to solve this is to designate the existing tr as a .template and clone it in your loop, make the necessary changes (filling in the values) and then appending it.
Fixing some other unclear things this gives the following
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(records) {
for (var i = 0; i < records.length; i++) {
//Clone the row/unit which we will be using for each record (the class should refer to the type of item it /actually/ is)
row = $(".row.template").clone();
//The template class is hidden, so remove the class from the row/unit
row.removeClass("template");
var map = records[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
//Make the required changes (find looks for the element inside var row)
row.find('.date').text(date);
row.find('.nohp').text(user);
row.find('.content').text(content);
//Append it to the parent element which contains the rows/units
$("tbody").append(row);
}
});
See functional demo: http://jsfiddle.net/YYTkK/13/
You must append a new row in the table in every loop. Here's the working fiddle.
fiddle
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
var row = '<tr><td>'+date+'</td><td>'+user+'</td><td>'+content+'</td></tr>';
$('#valuetable').append(row);
}
});
what you have to do is create dynamic "tr" s and append to tbody and use thead for header and separate the body using tbody and create tr s on each iteration and after the loop append that tr to tbody. that will do the job, as you do now it will override the values at each iteration.
#chamweer answer is correct you have to create a new tr with td's dynamically
like this:
http://jsfiddle.net/YYTkK/14/
Because you're overriding the same td's over and over again.
$.getJSON("http://1.handy-post-402.appspot.com/show?callback=?", function(json) {
for (var i = 0; i < json.length; i++) {
var map = json[i].propertyMap;
var content = map.isi;
var user = map.No_HP;
var date = map.tanggal;
// create a temporary tr
var tr = $("<tr />");
// append to the tr the td's with their values
tr.append($("<td />").text(date), $("<td />").text(user),
$('<td />').text(content));
// finally append the new tr to the table's tbody
$("#js-tbody").append(tr);
}
});

Finding the location of a TD in a table

So let's say I have a table, and I want to manipulate a specific <td> in it:
HTML:
<table>
<tr><td>1</td> <td>2</td></tr>
<tr><td>3</td> <td>4</td></tr>
<tr><td id="hi">5</td> <td>6</td></tr>
</table>
Javascript:
document.getElementsByTagName("table")[0].rows[2].cells[0];
This will help me REACH a specific cell in a table.
My question is this:
Say I have a specific <td> inside a table:
var td = document.getElementById("hi")
I want to KNOW its location in the table, so I can be able to reach it using table.rows[x].cells[y]
How can I check this location?
I'd suggest, as you imply you know which specific cell you want to find, though currently untested:
var td = document.getElementById("hi"),
col = td.cellIndex,
row = td.parentNode.rowIndex;
The cellIndex property of a td element gives the index of the cell in the row.
The rowIndex property of a tr element gives the index of the row in the table.
So,
var td = document.getElementById("hi");
var x = td.cellIndex;
var y = td.parentNode.rowIndex;
You will need something like this:
function getRowCellPosition(table, cell) {
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++) {
if (table.rows[i].cells[j] === cell) {
return {
row: i,
cell: j
};
}
}
}
return null;
}
or more simple:
function getRowCellPosition(cell) {
return {
row: cell.parentNode.rowIndex,
cell: cell.cellIndex
}
}
Simply create a for loop that goes through each row and column and compare the TD in that index against the one you want.
Try this:
for row:
Array.slice(el.parentNode.parentNode.children).indexOf(el.parentNode)
for col:
Array.slice(el.parentNode.children).indexOf(el)
The slice magick is because el.parentNode.children is not an array.
edit: I wasn't aware of td.cellIndex and tr.rowIndex. Definitely use them.

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.

Categories