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>

functions for checkboxes in Javascript

So I have a code with check boxes and I need a suggestion for a function to get data from database if the check box is checked. The table name for the database is Shifliigid and the column name which data I use in the check box is shiffer. So any suggestions would be nice (English isn't my first or even second language, so don't be mad for the short and shady explanation)
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Motoorika";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/motoorika";
input.value = rowData.motoorika.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeMotoorika = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0301";
td.appendChild(echeckbox);
td.innerHTML+="käeprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
td_tekst.innerHTML="Liikumine";
var td = document.createElement("td");
td.style.width = "370px";
var input = document.createElement("textarea");
//input.type = "text";
input.name = "//funktsioonide hindamine/funktsioon[" + count + "]/liikumine";
input.value = rowData.liikumine.replace(/<br\/>/g, "\r\n");
input.className = "txt_left";
input.style.width = "368px";
input.style.fontSize = "9pt";
var nodeLiikumine = input;
addChangeListener(input);
td.appendChild(input);
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);
//This is the part that makes the checkboxes
var nodeTr = document.createElement("tr");
var td_tekst = document.createElement("td");
var td = document.createElement("td");
var echeckbox = document.createElement("input");
echeckbox.type="checkbox";
echeckbox.name = "//funktsioonide hindamine/funktsioon[" + count + "]/nagemine/vahend_0302";
td.appendChild(echeckbox);
td.innerHTML+="jalaprotees/-ortoos";
nodeTr.appendChild(td_tekst);
nodeTr.appendChild(td);
evaluationContainer.appendChild(nodeTr);

There is no JS "function to get data from database".
You will have to choose a backend technology to access the database. For example PHP.

Use ajax calls to get the data from database using PHP or asp.
You can check if a particular checkbox is checked using the checked property of DOM.

.className() seem doesnt Work

I Have a table with rows added dynamically. These rows contain a date picker and dropdown, I am able to set classname on the but not on the datepicker and dropdown using .className()
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.className = "row1 part";
var cell1 = row.insertCell(0);
cell1.className = "value";
var element1 = document.createElement("input");
element1.type = "text";
element1.name = "txtbox[]";
element1.className = "date-pick"; // this fails
element1.setAttribute('value', '2013/10/04');
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
var element2 = document.createElement("select");
element2.name = "prddrop[]";
element2.id = "prddrop[]";
element2.className = "bankopt"; //this also fails
element2.options[element2.length] = new Option("[-- Please Choose --]", "[-- Please Choose --]");
var arr_items = [{
"IssuingBank": " --- "
}, {
"IssuingBank": " --- "
}];
$(document).ready(function () {
for (var i = 0; i < arr_items.length; i++) {
element2.options[element2.length] = new Option(arr_items[i].IssuingBank, arr_items[i].IssuingBank);
}
});
cell2.appendChild(element2);
Please help me with this... Thanks!

Remember that .appendChild() returns the element.
So you could do:
cell1.appendChild(element1).className = "class_to_add";
Another way:
You can use setAttribute (NOTE: This will not work on IE8 and earlier versions as stated by #om in the comments.)
var i = document.createElement('input');
i.setAttribute('class', 'myclass');
document.forms[0].appendChild(i);

This should work for you. Across all browsers.
var yourClass = document.createAttribute("class");
yourClass.value = "date-pick";
element1.setAttributeNode(yourClass);

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