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

JS code to add rows dynamically in to the table

P: 5
now iam trying to add rows dynamically into the table when i click "ADD ROW" button. It should also have the option to delete the selected row. So Please help me to find code....

And also please tell me how to add textarea and radiobutton in to the dynamically created rows..

Here is my code;


[HTML]<html>
<head>
<title>Untitled Document</title>

<script language="JavaScript">
function addRow1(id){
var tbody = document.getElementById
(id).getElementsByTagName("TBODY")[0];

var row = document.createElement("TR")
var td1 = document.createElement("TD")

var chkbox = document.createElement('input');
chkbox.type='Checkbox';
td1.align="center";
td1.height="39px";
td1.appendChild( chkbox);


var td2 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="2" ;
td2.align="center";
td2.appendChild (newTextBox)

var td3 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="2" ;
td3.align="center";
td3.appendChild (newTextBox)


var td4 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="2" ;
td4.align="center";
td4.appendChild (newTextBox)

var td5 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="2";
td5.align="center";
td5.appendChild (newTextBox)

var td6 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="7" ;
td6.align="center";
td6.appendChild (newTextBox)

var td8 = document.createElement("TD")
var newRadio = document.createElement('<input name="mmmkk" value="Yes" type="radio" id="yes">');
newRadio.type = 'radio';
var btn=document.createElement('input');
btn.type='submit';
btn.value='Edit';
newRadio.value='y';
newRadio.name="YES"



var newRadio1 = document.createElement('<input name="mmmkk" value="No" type="radio" id="yes">');
newRadio1.type = 'radio';

newRadio1.value='y';
td8.align="center";
td8.appendChild (newRadio);
td8.appendChild (newRadio1);
td8.appendChild(btn);

var td7 = document.createElement("TD");
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.size="4" ;
td7.align="center";
td7.appendChild (newTextBox)

var td9 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'textarea';
newTextBox.TextMode='MultiLine';
td9.align="center";

td9.appendChild (newTextBox)

var td10 = document.createElement("TD")
var newTextBox = document.createElement('input');
newTextBox.type = 'text';
newTextBox.textmode='MultiLine';
td10.align="center";
newTextBox.rows="15";
td10.appendChild (newTextBox)

row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
row.appendChild(td7);
row.appendChild(td8);
row.appendChild(td9);
row.appendChild(td10);

tbody.appendChild(row);
}
</script>



</head>

<body >

<table>
<tr>
<td>

<table id="myTable" border="2px" cellpadding="0px" cellspacing="0px"
width="100%">
<tbody>
<tr>

<td align="center" valign="top" width="7%">Select
</td>

<td align="center" valign="top" width="10%">Quantity
</td>

<td align="center" valign="top" width="8%">Length
</td>

<td align="center" valign="top" width="7%">Width
</td>

<td align="center" valign="top" width="8%">Height
</td>

<td align="center" valign="top" width="14%">Total <br/>
Measurement
</td>

<td align="center" valign="top" width="10%">Total<br/>
Weight
</td>

<td width="8%" > hgjhgj
</td>

<td align="center" valign="top" width="14%">Package and
Description of Cargo
</td>

<td align="center" valign="top" width="14%">Comments
</td>
</tr>


<tr>

<td align="center" width="7%">
<input name="" type="checkbox" value="" /> </td>

<td align="center" width="10%">
<input name="" type="text" size="2" /> </td>

<td align="center" width="8%">
<input name="" type="text" size="2" /> </td>

<td align="center" width="7%">
<input name="" type="text" size="2" /> </td>

<td align="center" width="8%">
<input name="" type="text" size="2" /> </td>

<td align="center" width="14%">
<input name="" type="text" size="7" /> </td>

<td align="center" width="10%">
<input name="" type="text" size="4" />

<td width="8%" >
<input type="radio" name="rad" value="" id="">Yes
<input type="radio" name="rad" value="" id="">No
<input type="submit" name="Submit" value="Edit">

</td>

<td align="center" width="14%">
<textarea cols="15"></textarea> </td>

<td align="center" width="14%">
<textarea name="" cols="15"></textarea>
</td>
</tr>
</tbody>
</table>


</td>


</tr>

<tr>
<td align="right">
<h3><br/>
<input type="button" value="Add Row"
onclick="addRow1('myTable')" />
<input name="" type="button" value="Delete Selected
Rows" />
<input name="" type="button" value="Submit" />
</h3>
</td>
</tr>

</table>

</body>
</html>
[/HTML]

Thank You,
waiting for your answer..
Bharath Kumar S
Feb 22 '08 #1
Share this Question
Share on Google+
11 Replies

acoder
Expert Mod 15k+
P: 16,027
So what happens? Does it work? Are there any errors? If so, what is it and on what line?
Feb 22 '08 #2

hsriat
Expert 100+
P: 1,654
@bharathmngl
And also please tell me how to add textarea and radiobutton in to the dynamically created rows..


Either create them by DOM method or just provide textarea html to the innerHTML the fields.

Rest I'm too reluctant to read the whole code.
Feb 22 '08 #3

P: 5
So what happens? Does it work? Are there any errors? If so, what is it and on what line?

hey i got this code from other source.. so please post me working code if you have, i need it urgently.......
Feb 26 '08 #4

acoder
Expert Mod 15k+
P: 16,027
How about this ?
Feb 26 '08 #5

P: 5
How about this ?

hey i've tried this code , buut not successfull..
give me some other, please.. its urgent..
Feb 27 '08 #6

acoder
Expert Mod 15k+
P: 16,027
What doesn't work? Have you tried the example?
Feb 27 '08 #7

P: 5
What doesn't work? Have you tried the example?
hey friend,

the example which u had reffered is working fine...
but when i modify that example to suit my need, its not working.....
Feb 27 '08 #8

acoder
Expert Mod 15k+
P: 16,027
So post your modified code and point out where the problem is (e.g. errors).
Feb 27 '08 #9

100+
P: 141
Hi ,

This may solve ur problem

Expand|Select|Wrap|Line Numbers
  1.  
  2. var table = document.getElementById(id);
  3. var checkboxes = document.getElementById(id).getElementsByTagName("INPUT");
  4. j=0;
  5. for(i=0;i<parseInt(checkboxes.length);)
  6. {
  7. flag=0;
  8. if(checkboxes[i].type == "checkbox")
  9. {
  10. if(checkboxes[i].checked == true)
  11. {
  12. table.deleteRow(j+1);
  13. i=0;
  14. j=0;
  15. flag=1;
  16. }
  17. if(flag == 0)
  18. j++;
  19. if(flag == 0)
  20. i++;
  21. }
  22.  
  23.  
  24.  








hey friend,

the example which u had reffered is working fine...
but when i modify that example to suit my need, its not working.....
Feb 27 '08 #10

P: 5
So post your modified code and point out where the problem is (e.g. errors).
Hai friend,
I have attached my code below. Here i am successfull in adding rows. Now i wanna to delete the rows that are only checked.... so please help me to solve my problem....its very urgent...

[HTML] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>

<style type="text/css">
<!--
#tblSample td, th { padding: 0.5em; }
.classy0 { background-color: #234567; color: #89abcd; }
.classy1 { background-color: #89abcd; color: #234567; }
-->
</style>

<script type="text/javascript">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script
  2. var RADIO_NAME = 'totallyrad'; // this is being set via script
  3. var TABLE_NAME = 'tblSample'; // this should be named in the HTML
  4. var ROW_BASE = 1; // first number (for display)
  5. var hasLoaded = false;
  6.  
  7. window.onload=fillInRows;
  8.  
  9. function fillInRows()
  10. {
  11.     hasLoaded = true;
  12.     addRowToTable();
  13.  
  14. }
  15.  
  16. // CONFIG:
  17. // myRowObject is an object for storing information about the table rows
  18. function myRowObject(one, two, three, four,five)
  19. {
  20.     this.one = one; // text object
  21.     this.two = two; // input text object
  22.     this.three = three; // input checkbox object
  23.     this.four = four; // input radio object
  24.     this.five = five;
  25. }
  26.  
  27. /*
  28.  * insertRowToTable
  29.  * Insert and reorder
  30.  */
  31.  function addRowToTable()
  32. {
  33.   var tbl = document.getElementById(TABLE_NAME);
  34.   var lastRow = tbl.rows.length;
  35.   // if there's no header row in the table, then iteration = lastRow + 1
  36.   var iteration = lastRow;
  37.   var row = tbl.insertRow(lastRow);
  38.  
  39.   // serial numbering
  40.   var cell0 = row.insertCell(0);
  41.   var textNode = document.createTextNode(iteration);
  42.   cell0.appendChild(textNode);
  43.  
  44.   //check box
  45.   var cell1 = row.insertCell(1);
  46.   var chkbox = document.createElement('input');
  47. chkbox.type='checkbox';
  48. cell1.align="center";
  49. cell1.height="39px";
  50. cell1.appendChild( chkbox);
  51.  
  52.   // text box1
  53.   var cell2 = row.insertCell(2);
  54.   var tl = document.createElement('input');
  55.   tl.type = 'text';
  56.   tl.name = 'txtRow' + iteration;
  57.   tl.id = 'txtRow' + iteration;
  58.   tl.size = 5;
  59.  
  60.  // el.onkeypress = keyPressTest;
  61.   cell2.appendChild(tl);
  62.  
  63.  
  64.   //textbox 2
  65.    var cell3 = row.insertCell(3);
  66.   var t2 = document.createElement('input');
  67.   t2.type = 'text';
  68.   t2.name = 'txtRow1' + iteration;
  69.   t2.id = 'txtRow1' + iteration;
  70.   t2.size = 5;
  71.    cell3.appendChild(t2);
  72.  
  73.  // el.onkeypress = keyPressTest;
  74.  
  75.  
  76.  
  77.  var cellrad = row.insertCell(4);
  78.   var rad = document.createElement('input');
  79. rad.type = 'radio';
  80. rad.name ='r[i]';
  81. //rad.value='ngfhfghgf';
  82. var lab = document.createTextNode("HAI");
  83. var lab1 = document.createElement('label');
  84. lab1.appendChild(lab);
  85. cellrad.appendChild(rad);
  86. cellrad.appendChild(lab1);
  87.  
  88.  
  89. row.myRow = new myRowObject(textNode, chkbox, tl,t2, rad);
  90.  
  91. // CONFIG: this entire function is affected by myRowObject settings
  92. // If there isn't a checkbox in your row, then this function can't be used.
  93. function deleteChecked()
  94. {
  95.     if (hasLoaded) {
  96.         var checkedObjArray = new Array();
  97.         var cCount = 0;
  98.  
  99.         var tbl = document.getElementById(TABLE_NAME);
  100.         for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
  101.             if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.one.getAttribute('type') == 'checkbox' && tbl.tBodies[0].rows[i].myRow.one.checked) {
  102.                 checkedObjArray[cCount] = tbl.tBodies[0].rows[i];
  103.                 cCount++;
  104.             }
  105.         }
  106.         if (checkedObjArray.length > 0) {
  107.             var rIndex = checkedObjArray[0].sectionRowIndex;
  108.             deleteRows(checkedObjArray);
  109.             reorderRows(tbl, rIndex);
  110.         }
  111.     }
  112. }
  113.  
  114. // If there isn't an element with an onclick event in your row, then this function can't be used.
  115. function deleteCurrentRow(obj)
  116. {
  117.     if (hasLoaded) {
  118.         var delRow = obj.parentNode.parentNode;
  119.         var tbl = delRow.parentNode.parentNode;
  120.         var rIndex = delRow.sectionRowIndex;
  121.         var rowArray = new Array(delRow);
  122.         deleteRows(rowArray);
  123.         //reorderRows(tbl, rIndex);
  124.     }
  125. }
  126.  
  127. function reorderRows(tbl, startingIndex)
  128. {
  129.     if (hasLoaded) {
  130.         if (tbl.tBodies[0].rows[startingIndex]) {
  131.             var count = startingIndex + ROW_BASE;
  132.             for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {
  133.  
  134.                 // CONFIG: next line is affected by myRowObject settings
  135.                 tbl.tBodies[0].rows[i].myRow.one.data = count; // text
  136.  
  137.                 // CONFIG: next line is affected by myRowObject settings
  138.                 tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; // input text
  139.  
  140.                 // CONFIG: next line is affected by myRowObject settings
  141.                 var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); // for debug purposes
  142.                 tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0]; // for debug purposes
  143.  
  144.                 // CONFIG: next line is affected by myRowObject settings
  145.                 tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio
  146.  
  147.                 // CONFIG: requires class named classy0 and classy1
  148.                 tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
  149.  
  150.                 count++;
  151.             }
  152.         }
  153.     }
  154. }
  155.  
  156. function deleteRows(rowObjArray)
  157. {
  158.     if (hasLoaded) {
  159.         for (var i=0; i<rowObjArray.length; i++) {
  160.             var rIndex = rowObjArray[i].sectionRowIndex;
  161.             rowObjArray[i].parentNode.deleteRow(rIndex);
  162.         }
  163.     }
  164. }
  165.  
  166.  
  167. }
  168.  
[HTML]</script>

</head>
<body>

<form action="file:///C|/Documents%20and%20Settings/Riyaz/Desktop/prac/tableaddrow_nw.html" method="get">

<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Insert [i]" onclick="insertRowToTable();" />

<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
</p>
<table border="0" cellspacing="0" id="tblSample" style="width: 454px; height: 53px">
<thead>
<tr>
<th colspan="5">Sample table</th>
</tr>

<tr>
<th>#</th>
<th>Input Text</th>
<th>Delete</th>
<th>D</th>
<th>I</th>

<th></th>

</tr>
</thead>
<tbody></tbody>
</table>
</form>


</body>
</html>[/HTML]
Feb 28 '08 #11

acoder
Expert Mod 15k+
P: 16,027
Either name your checkboxes so you can refer to them or loop over all the checkboxes and delete the rows with checked checkboxes.
Feb 28 '08 #12

Post your reply

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