Insert cells in specific column in Table - javascript

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

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);
}

How do I add a class to a <tr> tag using javascript

I'm basically trying to turn one of the rows in a table to a different color. I'm currently using the jquery plugin Sheetrock to grab information from a google sheet. I want to turn the 9th row red when it's value is lower than 10.
Here is a jsfiddle of what I am working on right now: http://jsfiddle.net/m04ddeu2/435/ .
Here is the google sheet I'm grabbing info from:
https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0
HTML:
<table id="statistics" class="table table-condensed table-striped"></table>
Javascript:
// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AlRp2ieP7izLdGFNOERTZW0xLVpROFc3X3FJQ2tSb2c#gid=0';
// Load an entire sheet.
$('#statistics').sheetrock({
url: mySpreadsheet,
rowHandler: formatRows
});
var formatRows = function (options) {
var columnNumber = 9;
var threshhold = 10;
$('tr', options.target).each(function (i, el) {
var $tableRow = $(el);
var amount = $('td:nth-child(' + columnNumber + ')', $tableRow).text();
if (parseInt(amount) <= threshhold) {
$tableRow.addClass('warning');
}
});
};
CSS:
.warning {
color:red
}
I can't see any issues in my code. Is there something wrong with the way I'm writing my variables?
The function that Sheetrock is looking for for rowHandler needs to be in the following form:
// Default row handler: Output a row object as an HTML table row.
var toHTML = function (row) {
var cell;
var html = '';
// Use "td" for table body row, "th" for table header rows.
var tag = (row.num) ? 'td' : 'th';
// Loop through each cell in the row.
for (cell in row.cells) {
if (row.cells.hasOwnProperty(cell)) {
// Wrap the cell value in the cell tag.
html += wrapTag(row.cells[cell], tag, '');
// you can add your logic here to test for ninth column value under 10
}
}
// Wrap the cells in a table row tag.
return wrapTag(html, 'tr', '');
};

Handle with dynamically made elements in Javascript

Is there a way to handle elements made dynamically on loading the page?
for example, I have a code below.
function makeAFrame(index)
{
var padding=document.createElement('p');
var frameDiv=document.createElement('div');
frameDiv.id="frame";
frameDiv.className="frame";
var placeButton=document.createElement('input');
placeButton.id="bButton"+index;
placeButton.className="bButton";
placeButton.value="aaa";
placeButton.type="button";
var buyButton=document.createElement('input');
buyButton.id="aButton"+index;
buyButton.className="aButton";
buyButton.value="Buy It Now";
buyButton.type="button";
var table=document.createElement('table');
table.setAttribute('cellpadding','3');
table.setAttribute('width','100%');
var col1=["a", "b", "c","d","e:", "f"];
var row;
var text;
var cell;
var i=0;
for(i=0;i<6;i++)
{
row = table.insertRow(i);
text = document.createTextNode(col1[i]);
cell = row.insertCell(0);
cell.setAttribute('align','right');
cell.setAttribute('width','30%');
cell.appendChild(text);
text = document.createTextNode(hey[index][i]);
cell = row.insertCell(1);
cell.setAttribute('align','left');
cell.appendChild(text);
}
for(i=6;i<8;i++)
{
row = table.insertRow(i);
text = document.createTextNode("");
cell = row.insertCell(0);
cell.setAttribute('align','right');
cell.setAttribute('width','30%');
cell.appendChild(text);
if(i==7)
{
cell = row.insertCell(1);
cell.setAttribute('align','left');
cell.appendChild(placeButton);
cell.appendChild(buyButton);
break;
}
else if(i==6)
text = document.createTextNode(remaining);
cell = row.insertCell(1);
cell.setAttribute('align','left');
cell.appendChild(text);
}
var body=document.getElementById('body');
frameDiv.appendChild(table);
body.appendChild(frameDiv);
body.appendChild(padding);
}
Once the function has been run which means after all elements are shown in the page. What I would like to do is when I click a 'aButton0'(aButton+index) a input box shows up. I make all button codes with index so they are accessible but I have no idea how to access after they are shown in the page.
Why dont you just add an onclick handler to your button when you create it, just add
placeButton.setAttribute("onclick", "showPopUp();");
Then you can react to your specific button within in the showPopUp function.

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))

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