By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,491 Members | 1,212 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,491 IT Pros & Developers. It's quick & easy.

How to access controls in a table?

P: 2
hi all,
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
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <TITLE> Adding & Deleting Rows of a Table Dynamically </TITLE>
  5. <SCRIPT type="text/javascript">
Expand|Select|Wrap|Line Numbers
  1. //This function validates the form.
  2. function validateForm()
  3. {
  4.     var bookName=document.getElementById("bookName");
  5.     if(bookName.value.length<=0)
  6.     {
  7.         alert("Please enter Book Name.");
  8.         bookName.focus();
  9.         return false;
  10.     }
  11.     var authorName=document.getElementById("authorName");
  12.     if(authorName.value.length<=0)
  13.     {
  14.         alert("Please enter Author Name.");
  15.         authorName.focus();
  16.         return false;
  17.     }
  18.     var price=document.getElementById("price");
  19.     if(price.value.length<=0)
  20.     {
  21.         alert("Please enter Price.");
  22.         price.focus();
  23.         return false;
  24.     }
  25.     return true;
  26. }
  27.  
  28. //This function returns only numbers.
  29. function nochars(e)
  30. {
  31.     var keynum;
  32.     if(window.event) 
  33.         keynum = e.keyCode;
  34.     if(keynum>=65 && keynum<=90)
  35.         return false;
  36.     else
  37.         return true;
  38. }
  39.  
  40. // This function checks wheather atleast one checkbox is checked or not.
  41. function checkBoxCheck()
  42. {
  43.         var rowCount=document.getElementById("books").rows.length;
  44.         //alert("row count in checkBoxCheck() : "+rowCount);
  45.         for(var i=0;i<=rowCount;i++)
  46.         {
  47.             //alert(document.getElementById("books").rows[i].innerHTML)
  48.             var element="chk"+i;
  49.             //alert(document.getElementById(element))
  50.             if(document.getElementById(element))
  51.             {
  52.  
  53.                     if(document.getElementById(element).checked)
  54.                         return true;
  55.             }
  56.         }
  57.         alert("Please select atleast one row to delete.");
  58.         return false;
  59. }
  60.  
  61. // This function checks all the check boxes.
  62. function checkAll()
  63. {
  64.     if(document.getElementById("chkAll").checked)
  65.     {
  66.         var rowCount=document.getElementById("books").rows.length;
  67.         //alert("row count in checkALL() : "+rowCount);
  68.         for(var i=1;i<=rowCount;i++)
  69.         {
  70.             var element="chk"+i;
  71.             if(document.getElementById(element))
  72.                     document.getElementById(element).checked=true;    
  73.         }
  74.     }
  75.     else
  76.     {
  77.         var rowCount=document.getElementById("books").rows.length;
  78.         for(var i=1;i<=rowCount;i++)
  79.         {
  80.             var element="chk"+i;
  81.             if(document.getElementById(element))
  82.                 document.getElementById(element).checked=false;    
  83.         }
  84.     }
  85. }        
  86.  
  87. // This functions adds new row to the table.
  88. function addRow()
  89. {
  90.     if(validateForm())
  91.     {
  92.         var booksTable=document.getElementById("books");
  93.  
  94.         var newRow= document.createElement('tr');
  95.         newRow.setAttribute('className',"tr");
  96.  
  97.         var cell1= document.createElement('td');
  98.         cell1.setAttribute('className',"td");    
  99.         cell1.setAttribute('width',"20px");    
  100.         var cell2= document.createElement('td');
  101.         cell2.setAttribute('className',"td");
  102.         cell2.setAttribute('width',"50px");    
  103.         var cell3= document.createElement('td');
  104.         cell3.setAttribute('className',"td");
  105.         cell3.setAttribute('width',"225px");    
  106.         var cell4= document.createElement('td');
  107.         cell4.setAttribute('className',"td");
  108.         cell4.setAttribute('width',"225px");    
  109.         var cell5= document.createElement('td');
  110.         cell5.setAttribute('className',"td");
  111.  
  112.         var chkBox=document.createElement('input');
  113.         chkBox.setAttribute('type',"checkbox");
  114.         chkBox.setAttribute('id',"chk"+(booksTable.rows.length+1));
  115.  
  116.         cell1.appendChild(chkBox);
  117.         cell2.appendChild(document.createTextNode(booksTable.rows.length+1));
  118.         cell3.appendChild(document.createTextNode(document.getElementById("bookName").value));
  119.         cell4.appendChild(document.createTextNode(document.getElementById("authorName").value));
  120.         cell5.appendChild(document.createTextNode(document.getElementById("price").value));
  121.  
  122.         newRow.appendChild(cell1);
  123.         newRow.appendChild(cell2);
  124.         newRow.appendChild(cell3);
  125.         newRow.appendChild(cell4);
  126.         newRow.appendChild(cell5);
  127.         booksTable.tBodies(0).appendChild(newRow);
  128. //        alert(newRow.innerHTML);
  129.     }
  130. }
  131.  
  132. // Deletes the selected rows in the table.
  133. function deleteRowz()
  134. {
  135.     if(checkBoxCheck())
  136.     {
  137.         var myBooks=document.getElementById("books");
  138.         rowCount=document.getElementById("books").rows.length;
  139.         for(i=0 ; i<=rowCount ; i++)
  140.         {
  141.             var myChkBox="chk"+(i+1);
  142.             if(document.getElementById(myChkBox))
  143.             {
  144.                 if(document.getElementById(myChkBox).checked==true)
  145.                 {
  146.                         myBooks.deleteRow(findRowNumber(document.getElementById(myChkBox)));
  147.                 }
  148.             }
  149.         }
  150.         document.getElementById("chkAll").checked=false;
  151.         checkAll();
  152.         //updateAllValues();
  153.     }
  154. }
  155. // This function returns the row index of element passed to it.
  156. function findRowNumber(element) 
  157.     while(element.tagName.toLowerCase() != "tr") 
  158.     {
  159.         element = element.parentNode; 
  160.     }
  161.     return element.rowIndex;
  162. }
  163.  
  164. //// NEW FUNCTION : Under Coding :
  165. function updateAllValues()
  166. {
  167.     booksTable=document.getElementById("books")
  168.     rowCount=booksTable.rows.length
  169.     for(var i=0;i<rowCount;i++)
  170.     {
  171.         var currentCheckBox=booksTable.rows[i].cells[0].getElementsByTagName("checkbox")
  172.         alert(currentCheckBox[i].checked);
  173.         for(var j=1;j<=currentCheckBox.length;j++)
  174.             alert(currentCheckBox[i].checked);
  175.     }
  176.  
  177.  
  178. }
  179.  
[HTML]</SCRIPT>
<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()"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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!
Sep 12 '08 #1
Share this Question
Share on Google+
3 Replies


omerbutt
100+
P: 638
watch a demo here http://www.myrage.biz/custom_order.php hope that you were looking for it do tell me if you face any prob
Sep 12 '08 #2

P: 2
thnq for ur quick reply.
i ll go thru it n revert bck my queries 2 u, if any,
Sep 12 '08 #3

omerbutt
100+
P: 638
thnq for ur quick reply.
i ll go thru it n revert bck my queries 2 u, if any,
you are anytime pranav13 but do avoid these such LINGO (tym , 2 u ) because you need to be descriptive and such things do confuse the other reader who is tryn to givwe a solution for your prob
:) regards,
Omer
Sep 12 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.