Develop Reference

Javascript add row to HTML table with text and onClick

i am adding a new table row in javascript:
var i=1;
function addRow(seq, nominalcode, description, quantity, unitprice) {
seq = seq || '';
nominalcode = nominalcode || '';
description = description || '';
quantity = quantity || '';
unitprice = unitprice || '';
var tbl = document.getElementById('table1');
var lastRow = tbl.rows.length - 4;
//var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
row.id = 'item_row_' + i;
var Cell0 = row.insertCell(0);
var elItemSequence = document.createElement('input');
elItemSequence.type = 'hidden';
elItemSequence.name = 'item_sequence' + i;
elItemSequence.id = 'item_sequence' + i;
elItemSequence.value = seq;
Cell0.appendChild(elItemSequence);
var elNominalcode = document.createElement('input');
elNominalcode.type = 'textarea';
elNominalcode.className = 'form-control';
elNominalcode.name = 'nominal_code' + i;
elNominalcode.id = 'nominal_code' + i;
elNominalcode.placeholder = 'Nominal Code';
elNominalcode.value = nominalcode;
Cell0.appendChild(elNominalcode);
var Cell1 = row.insertCell(1);
var elDescription = document.createElement('textarea');
elDescription.type = 'textarea';
elDescription.className = 'form-control';
elDescription.name = 'description' + i;
elDescription.id = 'description' + i;
elDescription.placeholder = 'Description';
elDescription.value = description;
elDescription.cols = 40;
elDescription.rows = 2;
Cell1.appendChild(elDescription);
var Cell2 = row.insertCell(2);
var elQuantity = document.createElement('input');
elQuantity.type = 'text';
elQuantity.className = 'form-control';
elQuantity.name = 'quantity' + i;
elQuantity.id = 'quantity' + i;
elQuantity.placeholder = 'Quantity';
elQuantity.value = quantity;
elQuantity.value = quantity;
Cell2 .appendChild(elQuantity);
var Cell3 = row.insertCell(3);
var elUnitPrice = document.createElement('input');
elUnitPrice.type = 'text';
elUnitPrice.className = 'form-control';
elUnitPrice.name = 'unitprice' + i;
elUnitPrice.id = 'unitprice' + i;
elUnitPrice.placeholder = 'Price';
elUnitPrice.value = unitprice;
Cell3.appendChild(elUnitPrice);
var Cell4 = row.insertCell(4);
var elDelete = document.createElement('a');
elDelete.href = '#';
elDelete.onclick = function(){ DeleteInvoiceLine(seq, i) };
elDelete.text = 'Delete' + i;
Cell4.appendChild(elDelete);
i++;
document.getElementById('numrows').value = (i-1);
//alert(i);
}
in the above code there is an onClick action which calls a function
but everytime the row is added its running the function, how can i make it only call the function on click of the a anchor
my function is:
function DeleteInvoiceLine(seq, row_num) {
alert(seq + '/' + row_num);
}

You can try anonymous function
elDelete.onclick = function(){ DeleteInvoiceLine(seq) };

Try this:
...
elDelete.setAttribute("onclick", "DeleteInvoiceLine("+ seq +","+ i +")");
....

There are several issues in your code.
1. elDelete.onclick=... not onClick
2. As you note DeleteInvoiceLine(seq) run at the moment the element created.
This is because you assign result of the function, not function to onclick event.
3. (not asked yet) What is sec variable? I suspect something like for(var sec=0;sec<N;sec++) and your code is inside the loop. This will not work (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures).
4. elDelete.onclick = function(){ DeleteInvoiceLine(seq) }; doesn't work because sec is out of scope at the moment of click.
Some fixes.
var i = 0;
//...
for(var sec=0;sec<N;sec++){
//your code
elDelete.onclick = DeleteInvoiceLine(seq, i);//I keep it with purpose
//your code
}
//...
i++;
//The key moment
function DeleteInvoiceLine(seq, row_num){
//sec comes here from the loop
return function(){//note (); (sec) would kill all construction
//and in this context would be **event {type:'click'}
$.ajax(
//your code which uses **sec** and/or **row_num**
//this time sec and row_num are available from parent scope
);//$.ajax
}//return function
}//function DeleteInvoiceLine

adding row to an existing table in javascript

guys i jnow it is dummy question but i spent hours in this and cant reach .. i want to add row to an existing table and this row consists of checkbox and 4 textboxes .. when i run it the textboxes appears but the checkbox dont .. here is my code
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var html = [];
html.push("<table id='table'>\n<body>");
html.push("<tr><td><input type='checkbox' name='chk'/></td>");
var cell = row.insertCell(html);
for ( var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
var element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input"+i;
cell.appendChild(element);
html.push("<td>" + cell + "</td>");
i++;
}
html.push("</tr>");
html.push("</body>\n</table>");
}

The problem is you are creating a array with the markup for the checkbox, but it is never added to the table
function addRow() {
var i = 1;
var table = document.getElementById("table");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell = row.insertCell();
var element = document.createElement("input");
element.type = "checkbox";
element.name = "chk";
cell.appendChild(element);
for (var propertyNames in grid.data[0]) {
cell = row.insertCell(i);
element = document.createElement("input");
element.type = "text";
element.size = 10;
element.name = "input" + i;
cell.appendChild(element);
i++;
}
}
var grid = {
data: [{
x: 1,
y: 1
}]
};
addRow();
<table id="table"></table>

adding focus on a runtime generated input box using javascript

hi i have a form which dynamically generates a table row on a button click using javascript
everything is working fine but now i want to add focus on a newly generated input box in my table row so can anyone help in this?
here is my script
<script language="javascript" type="text/javascript">
var jj=1;
function addRow()
{
//alert(jj)
var tbl = document.getElementById('zimtable');
var lastRow = tbl.rows.length;
var iteration = lastRow - 1;
var row = tbl.insertRow(lastRow);
var firstCell = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'zimname_' + jj;
el.id = 'zimname_' + jj;
el.size = 40;
el.maxlength = 40;
firstCell.appendChild(el);
var secondCell = row.insertCell(1);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'zimmob_' + jj;
el2.id = 'zimmob_' + jj;
el2.size = 10;
el2.maxlength = 10;
secondCell.appendChild(el2);
var thirdCell = row.insertCell(2);
var element4 = document.createElement("select");
element4.name ='zim_'+jj;
var option1 = document.createElement("option");
option1.value='TRUSTY';
option1.innerHTML='TRUSTY';
element4.appendChild(option1);
var option2 = document.createElement("option");
option2.value='MUQAMI HAZRAT';
option2.innerHTML='MUQAMI HAZRAT';
element4.appendChild(option2);
var option3 = document.createElement("option");
option3.value='MASJIDWAR JAMAAT KA SAATHI';
option3.innerHTML='MASJIDWAR JAMAAT KA SAATHI';
element4.appendChild(option3);
thirdCell.appendChild(element4);
var fourthCell = row.insertCell(3);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'zemail_' + jj;
el3.id = 'zemail_' + jj;
el3.size = 40;
el3.maxlength = 40;
fourthCell.appendChild(el3);
firstCell.focus();
// alert(i);
jj++;
makhtab.hh.value=jj;
// alert(jj);
}
</script>
i want to add focus on my first input box in my generated table row

Change the line:
firstCell.focus();
To:
el.focus();

try this
$('#zimname_1').focus();

Javascript function not recognizing id in getElementById

I am adding a row to a table, and attached an ondblclick event to the cells. The function addrow is working fine, and the dblclick is taking me to seltogg, with the correct parameters. However, the var selbutton = document.getElementById in seltogg is returning a null. When I call seltogg with a dblclick on the original table in the document, it runs fine. All the parameters "selna" have alphabetic values, with no spaces, special characters, etc. Can someone tell me why seltogg is unable to correctly perform the document.getElementById when I pass the id from addrow; also how to fix the problem.
function addrow(jtop, sel4list, ron4list) {
var tablex = document.getElementById('thetable');
var initcount = document.getElementById('numrows').value;
var sel4arr = sel4list.split(",");
var idcount = parseInt(initcount) + 1;
var rowx = tablex.insertRow(1);
var jtop1 = jtop - 1;
for (j = 0; j <= jtop1; j++) {
var cellx = rowx.insertCell(j);
cellx.style.border = "1px solid blue";
var inputx = document.createElement("input");
inputx.type = "text";
inputx.ondblclick = (function() {
var curj = j;
var selna = sel4arr[curj + 2];
var cellj = parseInt(curj) + 3;
inputx.id = "cell_" + idcount + "_" + cellj;
var b = "cell_" + idcount + "_" + cellj;
return function() {
seltogg(selna, b);
}
})();
cellx.appendChild(inputx);
} //end j loop
var rowCount = tablex.rows.length;
document.getElementById('numrows').value = rowCount - 1; //dont count header
} //end function addrow
function seltogg(selna, cellid) {
if (selna == "none") {
return;
}
document.getElementById('x').value = cellid; //setting up for the next function
var selbutton = document.getElementById(selna); //*****this is returning null
if (selbutton.style.display != 'none') { //if it's on
selbutton.style.display = 'none';
} //turn it off
else { //if it's off
selbutton.style.display = '';
} //turn it on
} //end of function seltogg

You try, writing this sentence:
document.getElementById("numrows").value on document.getElementById('numrows').value
This is my part the my code:
contapara=(parseInt(contapara)+1);
document.getElementById("sorpara").innerHTML+="<li id=\"inputp"+contapara+"_id\" class=\"ui-state-default\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>"+$('#inputp'+contapara+'_id').val()+"</li>";
Look you have to use this " y not '.
TRY!!!!

why the onclick event doen't work from an external .js file?

I have wrote a .js file in wich I have create a table, buttons, etc. My aplication is a photo album and everything is created on this file, the html build up properly with all the buttons but when I give click on the buttons, the buttons don't change the images.
The code of the .jp file is:
var dp = document.createElement("img");
function changeImage()
{
var list = document.getElementById('optionlist');
dp.src = list.options[list.selectedIndex].value;
alert(dp.src);
}
function prevImage()
{
var list = document.getElementById('optionlist');
alert("Llega a prev");
if(list.selectedIndex == 0)
{
list.selectedIndex = list.options.length-1;
}
else
{
list.selectedIndex--;
}
changeImage();
}
function firstImage()
{
var list = document.getElementById('optionlist');
list.selectedIndex = 0;
changeImage();
}
function nextImage()
{
var list = document.getElementById('optionlist');
if(list.selectedIndex == list.options.length-1)
{
list.selectedIndex = 0;
}
else
{
list.selectedIndex++;
}
changeImage();
}
function lastImage()
{
var list = document.getElementById('optionlist');
list.selectedIndex = 9;
changeImage();
}
function start() {
var txt1,txt2,txt3,txt4,txt5,txt6,txt7,txt8,txt9,txt10,txt11;
//get the reference for the body
var body = document.getElementsByTagName("body")[0];
//alert("creates a <table> element and a <tbody> element");
var tbl = document.createElement("table");
tbl.setAttribute("align","center");
tbl.setAttribute("border","0");
var tbl2 = document.createElement("table");
tbl2.setAttribute("align","center");
tbl2.setAttribute("border","0");
var tblBody = document.createElement("tbody");
var tblBody2 = document.createElement("tbody");
//alert("creating <p>");
txt11 = document.createTextNode(" JavaScript Module ");
var downtxt = document.createElement("p");
downtxt.setAttribute("align","center");
downtxt.appendChild(txt11);
//alert("creates <input> elements");
var first = document.createElement("input");
first.setAttribute("value", " << ");
first.setAttribute("type", "button");
first.onClick = firstImage;
var previous = document.createElement("input");
previous.setAttribute("type", "button");
previous.setAttribute("value", " < ");
previous.onClick = "JavaScript:prevImage()";
var last = document.createElement("input");
last.setAttribute("value", " >> ");
last.setAttribute("type", "button");
last.onClick = "JavaScript:lastImage()";
var next = document.createElement("input");
next.setAttribute("value", " > ");
next.setAttribute("type", "button");
next.onClick = "JavaScript:nextImage()";
//alert("creating images options and <select>");
var op1 = document.createElement("option");
var op2 = document.createElement("option");
var op3 = document.createElement("option");
var op4 = document.createElement("option");
var op5 = document.createElement("option");
var op6 = document.createElement("option");
var op7 = document.createElement("option");
var op8 = document.createElement("option");
var op9 = document.createElement("option");
var op10 = document.createElement("option");
op1.setAttribute("value","1.jpg");
txt1 = document.createTextNode("First Image");
op1.appendChild(txt1);
op2.setAttribute("value","2.jpg");
txt2 = document.createTextNode("Second Image");
op2.appendChild(txt2);
op3.setAttribute("value","3.jpg");
txt3 = document.createTextNode("Third Image");
op3.appendChild(txt3);
op4.setAttribute("value","4.jpg");
txt4 = document.createTextNode("Fourth Image");
op4.appendChild(txt4);
op5.setAttribute("value","5.jpg");
txt5 = document.createTextNode("Fifth Image");
op5.appendChild(txt5);
op6.setAttribute("value","6.jpg");;
txt6 = document.createTextNode("Sixth Image");
op6.appendChild(txt6);
op7.setAttribute("value","7.jpg");
txt7 = document.createTextNode("Seventh Image");
op7.appendChild(txt7);
op8.setAttribute("value","8.jpg");
txt8 = document.createTextNode("Eight Image");
op8.appendChild(txt8);
op9.setAttribute("value","9.jpg");
txt9 = document.createTextNode("Ninth Image");
op9.appendChild(txt9);
op10.setAttribute("value","10.jpg");
txt10 = document.createTextNode("Tenth Image");
op10.appendChild(txt10);
var slct = document.createElement("select");
slct.setAttribute("id","optionlist");
slct.onChange = changeImage;
slct.appendChild(op1);
slct.appendChild(op2);
slct.appendChild(op3);
slct.appendChild(op4);
slct.appendChild(op5);
slct.appendChild(op6);
slct.appendChild(op7);
slct.appendChild(op8);
slct.appendChild(op9);
slct.appendChild(op10);
//alert("Creating rows and columns for the tables");
var td1 = document.createElement("td");
td1.setAttribute("align","center");
td1.setAttribute("colspan","3");
dp.setAttribute("name","mainimage");
dp.setAttribute("border","1");
dp.setAttribute("align","center");
td1.appendChild(dp);
var tr1 = document.createElement("tr");
tr1.setAttribute("align","center");
tr1.appendChild(td1);
var td2 = document.createElement("td");
td2.setAttribute("align","left");
td2.appendChild(first);
td2.appendChild(previous);
var td3 = document.createElement("td");
td3.setAttribute("align","center");
td3.appendChild(slct);
var td4 = document.createElement("td");
td4.setAttribute("align","right");
td4.appendChild(next);
td4.appendChild(last);
var tr2 = document.createElement("tr");
tr2.appendChild(td2);
tr2.appendChild(td3);
tr2.appendChild(td4);
//alert("adding all the elements to the table");
tblBody2.appendChild(tr1);
tblBody.appendChild(tr2);
tbl2.appendChild(tblBody2);
tbl.appendChild(tblBody);
//alert("adding table to <body>");
body.appendChild(tbl2);
body.appendChild(tbl);
body.appendChild(downtxt);
changeImage();
}
and the html code is:
<html>
<head>
<title>Photo Album </title>
<style>
p, td {color:blue;font-family:verdana;font-size:8pt}
h1 {color:black;font-family:verdana;font-size:14pt}
</style>
<script type = "text/javascript" src = "PAScript.js" language = "javascript">
</script>
</head>
<body onLoad="start()" bgcolor = "grey">
</body>
</html>
It somebody can help me please, I don't have idea how to make work the buttons of my application
Thanks

When you're setting onclick by javascript, it's a function reference instead of a string.
previous.onClick = "JavaScript:prevImage()";
should be
previous.onclick = prevImage;
Fix your other assignments to follow this pattern. Also onclick is all lower case and is case sensitive.
As long as we're on the topic, the preferred way to register event handlers is
standards compliant browsers
previous.addEventListener('click', prevImage, false);
IE
previous.attachEvent('onclick', prevImage);