[JS] Dynamic Tables
1 post
Page 1 of 1
Quick Profile
Information
Posts: 833
Joined: Wed Jan 05, 2011 3:59 pm View Full Profile
Hello everyone,
in this tutorial we'll be making dynamic tables in HTML and JavaScript.
To get started, first we need to set ourselfs a goal. Our goal in this tutorial is
to make table in which user can add, remove and edit rows. As always, we will begin with
simple HTML file which should look like this:
After adding script tags*, we will add some code to them. The first function which will be added will be addRow().
This function will add another row on each click on a button which was added in first code block.
The function would look somehow like this:
-Caches table;
-Gets lenght of table;
-Declares variable f which represents our new row;
-Adds 2 fields to row and assigns event on them;
-Finally adds another field which will contain selection checkbox;
Next function will be the one which is used for editing content of table field.
When our textfield loses focus, it will call function which will change text in field.
Next function which should be added is delete row:
And last bit of code will check/uncheck all checkboxes
That's all folks, good night!
*
in this tutorial we'll be making dynamic tables in HTML and JavaScript.
To get started, first we need to set ourselfs a goal. Our goal in this tutorial is
to make table in which user can add, remove and edit rows. As always, we will begin with
simple HTML file which should look like this:
Code: Select all
So now we have our basic layout done, we can start with scripting! YAY!<!doctype html>
<html>
<head>
<title>Dynamic table test</title>
</head>
<body>
<input type="button" onclick="addRow();" value="New row" />
<input type="button" onclick="deleteRows();" value="Remove rows" />
<table id="table">
<tr><th>Value1</th><th>Value2</th><th style="width: 20px;"><input type="checkbox" id="mainCheck" onchange="checkAll();"/></th></tr>
</table>
</body>
After adding script tags*, we will add some code to them. The first function which will be added will be addRow().
This function will add another row on each click on a button which was added in first code block.
The function would look somehow like this:
Code: Select all
What code above does is:function addRow(){
var e=document.getElementById("table");
var c=e.rows.length;
var f=e.insertRow(c);
var d=f.insertCell(0);
d.setAttribute("onClick","changeContent(this);");
var b=f.insertCell(1);
b.setAttribute("onClick","changeContent(this);");
var a=f.insertCell(2);
a.innerHTML='<input id="selector'+c+'" type="checkbox" name="chk" />';
a.style.width="20px"
}
-Caches table;
-Gets lenght of table;
-Declares variable f which represents our new row;
-Adds 2 fields to row and assigns event on them;
-Finally adds another field which will contain selection checkbox;
Next function will be the one which is used for editing content of table field.
Code: Select all
The code above consist of two functions, changeContent adds textfield for user input.function changeContent(a){
a.innerHTML='<input type=text name=newname onBlur="javascript:apply(this);" value="'+a.innerHTML+'">';
a.firstChild.focus()
}
function apply(a){
a.parentNode.innerHTML=a.value;
}
When our textfield loses focus, it will call function which will change text in field.
Next function which should be added is delete row:
Code: Select all
This code loops through whole table searching for checked checkboxes, if he finds one, he will autoaticly delete row.function deleteRows() {
var d=document.getElementById("table");
var a=d.rows.length;
for(var c=1; c<a; c++) {
var g=d.rows[c];
var b=g.cells[2].childNodes[0];
if(null!=b&&true==b.checked) {
d.deleteRow(c);
a--;
c--;
}
}
}
And last bit of code will check/uncheck all checkboxes
Code: Select all
I think this is self explinational, so no need for describing everything.function checkAll(){
var d=document.getElementById("table");
var a=d.rows.length;
for(var c=0; c<a; c++){
var e=d.rows[c];
var b=e.cells[2].childNodes[0];
b.checked=document.getElementById("mainCheck").checked
}
}
That's all folks, good night!
*
Code: Select all
<script type="text/javascript"></script>CodenStuff wrote:Nope, it's just your sick and dirty mind. You sick twisted warped little pervo
1 post
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023