2
im pranav. i have a table with checkbox, sno, book name, book price as coloumns in it. Everything is 5ne while adding and deleting rows.
But my requirement is that, now i want to update the checkbox IDs and row numbers.
For example, pretend that there are 5 rows in the table. I have deleted 2nd and 4th. Now, it should make the 3rd row as 2nd row by updating the checkbox id and sno as chk2 and 2 resp.
here is my code.
Expand|Select|Wrap|Line Numbers
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <HTML>
- <HEAD>
- <TITLE> Adding & Deleting Rows of a Table Dynamically </TITLE>
- <SCRIPT type="text/javascript">
Expand|Select|Wrap|Line Numbers
- //This function validates the form.
- function validateForm()
- {
- var bookName=document.getElementById("bookName");
- if(bookName.value.length<=0)
- {
- alert("Please enter Book Name.");
- bookName.focus();
- return false;
- }
- var authorName=document.getElementById("authorName");
- if(authorName.value.length<=0)
- {
- alert("Please enter Author Name.");
- authorName.focus();
- return false;
- }
- var price=document.getElementById("price");
- if(price.value.length<=0)
- {
- alert("Please enter Price.");
- price.focus();
- return false;
- }
- return true;
- }
- //This function returns only numbers.
- function nochars(e)
- {
- var keynum;
- if(window.event)
- keynum = e.keyCode;
- if(keynum>=65 && keynum<=90)
- return false;
- else
- return true;
- }
- // This function checks wheather atleast one checkbox is checked or not.
- function checkBoxCheck()
- {
- var rowCount=document.getElementById("books").rows.length;
- //alert("row count in checkBoxCheck() : "+rowCount);
- for(var i=0;i<=rowCount;i++)
- {
- //alert(document.getElementById("books").rows[i].innerHTML)
- var element="chk"+i;
- //alert(document.getElementById(element))
- if(document.getElementById(element))
- {
- if(document.getElementById(element).checked)
- return true;
- }
- }
- alert("Please select atleast one row to delete.");
- return false;
- }
- // This function checks all the check boxes.
- function checkAll()
- {
- if(document.getElementById("chkAll").checked)
- {
- var rowCount=document.getElementById("books").rows.length;
- //alert("row count in checkALL() : "+rowCount);
- for(var i=1;i<=rowCount;i++)
- {
- var element="chk"+i;
- if(document.getElementById(element))
- document.getElementById(element).checked=true;
- }
- }
- else
- {
- var rowCount=document.getElementById("books").rows.length;
- for(var i=1;i<=rowCount;i++)
- {
- var element="chk"+i;
- if(document.getElementById(element))
- document.getElementById(element).checked=false;
- }
- }
- }
- // This functions adds new row to the table.
- function addRow()
- {
- if(validateForm())
- {
- var booksTable=document.getElementById("books");
- var newRow= document.createElement('tr');
- newRow.setAttribute('className',"tr");
- var cell1= document.createElement('td');
- cell1.setAttribute('className',"td");
- cell1.setAttribute('width',"20px");
- var cell2= document.createElement('td');
- cell2.setAttribute('className',"td");
- cell2.setAttribute('width',"50px");
- var cell3= document.createElement('td');
- cell3.setAttribute('className',"td");
- cell3.setAttribute('width',"225px");
- var cell4= document.createElement('td');
- cell4.setAttribute('className',"td");
- cell4.setAttribute('width',"225px");
- var cell5= document.createElement('td');
- cell5.setAttribute('className',"td");
- var chkBox=document.createElement('input');
- chkBox.setAttribute('type',"checkbox");
- chkBox.setAttribute('id',"chk"+(booksTable.rows.length+1));
- cell1.appendChild(chkBox);
- cell2.appendChild(document.createTextNode(booksTable.rows.length+1));
- cell3.appendChild(document.createTextNode(document.getElementById("bookName").value));
- cell4.appendChild(document.createTextNode(document.getElementById("authorName").value));
- cell5.appendChild(document.createTextNode(document.getElementById("price").value));
- newRow.appendChild(cell1);
- newRow.appendChild(cell2);
- newRow.appendChild(cell3);
- newRow.appendChild(cell4);
- newRow.appendChild(cell5);
- booksTable.tBodies(0).appendChild(newRow);
- // alert(newRow.innerHTML);
- }
- }
- // Deletes the selected rows in the table.
- function deleteRowz()
- {
- if(checkBoxCheck())
- {
- var myBooks=document.getElementById("books");
- rowCount=document.getElementById("books").rows.length;
- for(i=0 ; i<=rowCount ; i++)
- {
- var myChkBox="chk"+(i+1);
- if(document.getElementById(myChkBox))
- {
- if(document.getElementById(myChkBox).checked==true)
- {
- myBooks.deleteRow(findRowNumber(document.getElementById(myChkBox)));
- }
- }
- }
- document.getElementById("chkAll").checked=false;
- checkAll();
- //updateAllValues();
- }
- }
- // This function returns the row index of element passed to it.
- function findRowNumber(element)
- {
- while(element.tagName.toLowerCase() != "tr")
- {
- element = element.parentNode;
- }
- return element.rowIndex;
- }
- //// NEW FUNCTION : Under Coding :
- function updateAllValues()
- {
- booksTable=document.getElementById("books")
- rowCount=booksTable.rows.length
- for(var i=0;i<rowCount;i++)
- {
- var currentCheckBox=booksTable.rows[i].cells[0].getElementsByTagName("checkbox")
- alert(currentCheckBox[i].checked);
- for(var j=1;j<=currentCheckBox.length;j++)
- alert(currentCheckBox[i].checked);
- }
- }
<style>
.table
{
width:640px;
text-align: center;
border-width: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
}
.td
{
padding: 1px;
border-width: 1px;
border-style: solid;
border-color: black;
FONT-FAMILY: Arial;
font-size: 14;
}
.tr
{
height: 25px;
text-align: center;
}
.text
{
border-style:solid;
border-width:1px;
}
</style>
</HEAD>
<BODY onload="document.getElementById('bookName').focus( )"> <br><br><input type="button" value="Sample Update" onclick="updateAllValues()"/><br><br>
<table bgcolor=#C8C8C8 align="center" class="table" style="width:240px" >
<tr id="0" class="tr">
<td class="td" > Book Name</td>
<td class="td"> <input type="text" id="bookName" class="text"/> </td>
</tr>
<tr id="1" class="tr">
<td class="td" > Author Name</td>
<td class="td"> <input type="text" id="authorName" class="text"/> </td>
</tr>
<tr id="2" class="tr">
<td class="td" > Price</td>
<td class="td"> <input type="text" id="price" class="text" onkeydown="return nochars(event)"/> </td>
</tr>
<tr id="3" class="tr" bgcolor="white">
<td class="td" colspan=2> <img src="add.jpg" style="cursor:pointer" onclick="addRow()"> &n bsp;
<img src="remove.jpg" style="cursor:pointer" onclick="deleteRowz()">
</td>
</tr>
</table>
<br/> <br/> <br/>
<table align="center" class="table" >
<tr class="tr">
<td bgcolor=#00CCCC class="td" colspan=5> <center> <b> Online Book Shopping </b> </center> </td>
</tr>
<tr class="tr">
<th class="td" width=20px> <input type="checkbox" ID="chkAll" onclick="checkAll()"/> </td>
<th class="td" width=50px> S.No. </th>
<th class="td" width=225px> <center> Book Name </center> </th>
<th class="td" width=225px> <center> Author </center> </th>
<th class="td"> <center> Price (in Rs.) </center> </th>
</tr>
</table>
<table id="books" align="center" class="table" >
</table>
</BODY>
</HTML>[/HTML]
Thanks in advance!
