We Keep Coding

Jquery adding cell in HTML table i want i set it display none as these are ids ? MVC

I am actually adding id to HTML table than using them for saving.
But i dont want to show it,
here is my jquery for adding cell to the table,
$("body").on("click", "#btnAdd", function () {
//Reference the Name and Country TextBoxes.
var txtName = $("#txtFamilyName");
// var txtCountry = $("#txtCountry");
//Get the reference of the Table's TBODY element.
var tBody = $("#tblCustomers > TBODY")[0];
//Add Row.
var row = tBody.insertRow(-1);
//Add Name cell.
var cell = $(row.insertCell(-1));
cell.html($('#ddlregion').find('option:selected').text());
var cell = $(row.insertCell(-1));
cell.html($('#ddlcityy').find('option:selected').text());
var cell = $(row.insertCell(-1));
cell.html(ddlcityy.value);
var cell = $(row.insertCell(-1));
cell.html(ddltribe.value);
//Add Button cell.
cell = $(row.insertCell(-1));
var btnRemove = $("<input />");
btnRemove.attr("type", "button");
btnRemove.attr("onclick", "Remove(this);");
btnRemove.val("Remove");
cell.append(btnRemove);
});
This jquery adding city and tribe id i want to add them but not to display.
EDITED:
cell.setAttribute("hidden", true); or ` cell.style.display = 'none';
They both are working but only for one cell
let see i change to
var cell = $(row.insertCell(-1));
cell.html(ddlcityy.value);
cell.setAttribute("hidden", true);
var cell = $(row.insertCell(-1));
cell.html(ddltribe.value);
cell.setAttribute("hidden", true);
"Cityid" is 3 and "Tribeid" is 1 its every time hiding only tribe id not city id.
I even change variable name for both of them from cell to cell1 but result is same.
why it is only hiding tribe id ?

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

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.

Accessing dynamically generated content in jquery

I've just recently learned how jquery can access dynamically generated content, by placing a "bubble" around its parent object (or first available parent that is not dynamic), and then telling it how to handle an event from within it etc.
I have a table (static) and rows are dynamically added.
<table class="aBorder_ClearBlack" width="100%" id="tblEveryone">
<tr class="TableHeading_Dark_Small">
<td>Current User Calls</td>
<td><span id="theRefresh" style="cursor:pointer">
<img ... onclick="javascript:clicky()"...></span>
</td>
</tr>
and the code that adds the rows:
function clicky() {
var table = document.getElementById("tblEveryone");
var tmpRowCount = table.rows.length;
//clear existing rows first (else it just appends)
for (var x = 2; x < tmpRowCount; x++) {
table.deleteRow(x);
tmpRowCount--;
x--;
}
jQuery.each(users, function (index, user) {
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.style.display = "none"; <--------
row.setAttribute('class', 'BeforeHover_Clean');
var cell1 = row.insertCell(0);
cell1.innerHTML = users[index].Name;
var cell2 = row.insertCell(1);
cell2.innerHTML = users[index].Calls;
});
$(".BeforeHover_Clean").show(); <-----
}
then the code i use to "bind" click events on each row
$(document).ready(function () {
$('#tblEveryone').delegate(".BeforeHover_Clean", "click", function () {
var whatClicked = this.innerHTML.toLowerCase().split("</td>")[0].split("<td>")[1];
document.getElementById("aIframe").src = "Calls.aspx?aUser=" + whatClicked;
});
});
The thing is (line marked with <---- above, second block), row.style.display, correctly starts off the items with none as visibility, but the last line, $(".BeforeHover_Clean").show(); obviously wont work as the content is dynamic. Is there a way to manipulate the delegate, or some other jquery feature, to set the items visible again when needed?
I am clueless at this level. Binding "click" events to the parent is as good as i got! lol. I feel like charles babbage now! ;)

The fact that it is dynamic shouldn't matter.
You hae a rather strange mix of jQuery and DOM JavaScript whjich probably isn't helping, and is also bloating your code substantially.
For example, your each loop can be condensed as follows:
jQuery.each(users, function (index, user) {
var $newRow = $("<tr class='BeforeHover_Clean'><td>" + users[index].Name+ "</td><td>" + users[index].Calls + "</td></tr>").hide();
$("#tblEveryone").find('tbody').append($newRow);
});
Try using the ID selector $("#myid"); instead of document.getElementById(); and also playing around with some of the jQuery DOM manipulation methods, append(), prepend(), insertAfter(), etc.
Not a specific answer to your question, but hopefully some helpful guidelines.

Programmatically using onmouseover for an element added with appendChild

I am using this code to add a row to a table usign js:
var tbody = document.getElementById('tableID').getElementsByTagName('tbody')[0];
var row = document.createElement("TR");
tbody.appendChild(row);
I want to use onmouseover on that TR to make it change the background color, how can I do that?

row.onmouseover = function() { this.style.backgroundColor = "Green"; };