Monday, November 17, 2008

Having Game Dynamic Tabel Row with Javascript


On a world of web programming, we used to see insert, update, delete process to data in database, and so with select query into a view process using tag table and show the data’s by using script html and view it in a browser.

And now we try to research process of “Add New Row” and “Delete Row” about tag table in web-app by using javascript, why we should use javascript? Cause if we build a web sites or web application using javascript and gain some ability to process add new row or delete row in table tag without refresh, with the result that loading effort need to communicate with server might reducible, if edit process to table tag is done, and all the data’s going insert to database is correct than communication to database server could done by once insert data.

Now start to discuss step by step to get the process done, as a basic foundation we try to build it on php, foreknown this process could written on various web programming which is php, jsp, java or even .Net, but for now we only discuss it on php. Start with a file with any name *.php to shape a first page with a table on it and a link for further action, although action link to add row nor delete row. With this script shown below:




<html>
<head>
<title>Dynamic Table, Add / Delete Row</title>
</head>
<body>
<div class="area">
<div class="toolbar-clean">
<a href="javascript:addNewRow();"><span>New Row</span></a>
<a href="javascript:deleteRow();"><span>Delete Row</span></a>
</div>
<table width="80%" cellpadding="0" cellspacing="0" border="1" id="lineItemTable">
<tr>
<th width="0%"> </th>
<th width="2%" align="center">
<input type="checkbox" name="checkMaster" id="checkMaster" onClick="clickAll();"/>
</th>
<th width="24%">Nomor Induk</th>
<th width="24%">Nama Siswa</th>
<th width="50%">Alamat Lengkap</th>
</tr>
</table>
</div>
</body>
</html>

From script shown above will produce page like shown below:

After got the page like wanted, for the next step is to add javascript code into php file. This addition is to fulfill request link action “New Row” and “Delete Row” process than insert into html script tag, first we going to write function to add new row with function name “addNewRow” with all derivative function like shown below:


function addNewRow() {
var tbl = document.getElementById("lineItemTable");
var row = tbl.insertRow(tbl.rows.length);

var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

td0.appendChild(generateIndex(row.rowIndex));
td1.appendChild(generateCheckBox(row.rowIndex));
td2.appendChild(generateNomorInduk(row.rowIndex));
td3.appendChild(generateNomorRegister(row.rowIndex));
td3.appendChild(generateNamaSiswa(row.rowIndex));
td4.appendChild(generateItemName(row.rowIndex));

row.appendChild(td0);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
}

function generateIndex(index) {
var idx = document.createElement("input");
idx.type = "hidden";
idx.name = "index[ ]";
idx.id = "index["+index+"]";
idx.value = index;

return idx;
}

function generateCheckBox(index) {
var check = document.createElement("input");
check.type = "checkbox";
check.name = "check[ ]";
check.id = "check["+index+"]";

return check;
}

function generateNomorInduk(index) {
var idx = document.createElement("input");
idx.type = "text";
idx.name = "nomorInduk[ ]";
idx.id = "nomorInduk["+index+"]";
idx.size = "15";

return idx;
}

function generateNomorRegister(index) {
var idx = document.createElement("input");
idx.type = "hidden";
idx.name = "nomorRegister[ ]";
idx.id = "nomorRegister["+index+"]";

return idx;
}

function generateNamaSiswa(index) {
var idx = document.createElement("input");
idx.type = "text";
idx.name = "namaSiswa[ ]";
idx.id = "namaSiswa["+index+"]";
idx.size = "25";

return idx;
}

function generateItemName(index) {
var itemName = document.createElement("input");
itemName.type = "text";
itemName.name = "alamatSiswa[ ]";
itemName.id = "alamatSiswa["+index+"]";
itemName.size = "40";

return itemName;
}

From sample javascript code like show above, we can figure out process to produce new row which going to be generated, if “New Row” link clicked, generated column composition adapt with header composition, therefore when process been executed than page browser will show like figure below, and new row will continue add to the table if “New Row” link clicked continuously.

After got result like shown above, next step had to continue is adding new function to checked all checkbox in the table, so if we want to checked all the checkbox we don’t need to check one by one at the time, with this function we can check all at a time, this function written like this code below:


function clickAll() {
var checked = false;
if (document.getElementById("checkMaster").checked == true)
checked = true;

var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
node.checked = checked;
}
}

After the code insert into html script tag with new function “clickAll” as a name, then checkbox element placed on header can assume working properly. And if this checkbox clicked then we can see page like shown below. We can see the different between a second figure and third figure where the checkbox element clicked and not clicked.


And final step to insert function “deleteRow” which have a duty to delete row or picked row from table if necessary, this function can also to delete all row in the table with condition if all the checkbox element checked, javascript code written like shown below.



function deleteRow() {
var tbl = document.getElementById("lineItemTable");
var error = false;

if (document.getElementById("checkMaster").checked == false)
error = true;

var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
if (node.checked == true) {
error = false;
break;
}
}

if (error == true) {
alert ("Checkbox tidak di cek, proses tidak dapat dilanjutkan");
return;
}

if (document.getElementById("checkMaster").checked == true) {
deleteAll();
document.getElementById("checkMaster").checked = false;
} else {
var table = document.createElement("table");
bufferRow(table);
deleteAll();
reIndex(table);
}
}

function deleteAll() {
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length - 1;
for (var idx = rowLen; idx > 0; idx--)
tbl.deleteRow(idx)
}

function bufferRow(table) {
var tbl = document.getElementById("lineItemTable");
var rowLen = tbl.rows.length;
for (var idx = 1; idx < rowLen; idx++) {
var row = tbl.rows[idx];
var cell = row.cells[1];
var node = cell.lastChild;
if (node.checked == false) {
var rowNew = table.insertRow(table.rows.length);

var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

td0.appendChild(row.cells[0].lastChild);
td1.appendChild(row.cells[1].lastChild);
td2.appendChild(row.cells[2].lastChild);
td3.appendChild(row.cells[3].firstChild);
td3.appendChild(row.cells[3].lastChild);
td4.appendChild(row.cells[4].lastChild);

rowNew.appendChild(td0);
rowNew.appendChild(td1);
rowNew.appendChild(td2);
rowNew.appendChild(td3);
rowNew.appendChild(td4);
}
}
}

function reIndex(table) {
var tbl = document.getElementById("lineItemTable");
var rowLen = table.rows.length;
for (var idx=0;idx < rowLen;idx++) {
var row = table.rows[idx];
var rowTbl = tbl.insertRow(tbl.rows.length);

var td0 = document.createElement("td");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");

td0.appendChild(row.cells[0].lastChild);
td1.appendChild(row.cells[1].lastChild);
td2.appendChild(row.cells[2].lastChild);
td3.appendChild(row.cells[3].firstChild);
td3.appendChild(row.cells[3].lastChild);
td4.appendChild(row.cells[4].lastChild);

rowTbl.appendChild(td0);
rowTbl.appendChild(td1);
rowTbl.appendChild(td2);
rowTbl.appendChild(td3);
rowTbl.appendChild(td4);
}
}

As seen on javascript “deleteRow” function, we can figure validate process before delete command executed in line 4th until 22nd to checking neither checkbox element are checked or not, if at least just one checkbox are checked then this process can be executed, but if non of this element are checked then process will stop and continue with alert in browser like shown below:


Perhaps only this knowledge I can share to all reader for this moment, if in this article contain some mistake, please don’t mind to correct me if I done some wrong or give me some advise and comment. To improve knowledge and share it to other.