JS code to add rows dynamically in to the table

5 New Member

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

Subscribe Reply

3148

acoder

16,027

Recognized Expert Moderator MVP

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

Feb 22 '08 #2

hsriat

1,654

Recognized Expert Top Contributor

@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

bharathmngl

New Member

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

16,027

Recognized Expert Moderator MVP

How about this ?

Feb 26 '08 #5

bharathmngl

New Member

How about this ?

hey i've tried this code , buut not successfull..
give me some other, please.. its urgent..

Feb 27 '08 #6

acoder

16,027

Recognized Expert Moderator MVP

What doesn't work? Have you tried the example?

Feb 27 '08 #7

bharathmngl

New Member

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

16,027

Recognized Expert Moderator MVP

So post your modified code and point out where the problem is (e.g. errors).

Feb 27 '08 #9

vee10

141

New Member

Hi ,

This may solve ur problem

Expand|Select|Wrap|Line Numbers

  
var table = document.getElementById(id);

var checkboxes = document.getElementById(id).getElementsByTagName("INPUT");

j=0;

for(i=0;i<parseInt(checkboxes.length);)

{

flag=0;

if(checkboxes[i].type == "checkbox")

{

if(checkboxes[i].checked == true)

{

table.deleteRow(j+1);

i=0;

j=0;

flag=1;

}

if(flag == 0)

j++;

} 

if(flag == 0)

i++;

}

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

bharathmngl

New Member

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">

</style>

<script type="text/javascript">
[/HTML]

Expand|Select|Wrap|Line Numbers

 var INPUT_NAME_PREFIX = 'inputName'; // this is being set via script

var RADIO_NAME = 'totallyrad'; // this is being set via script

var TABLE_NAME = 'tblSample'; // this should be named in the HTML

var ROW_BASE = 1; // first number (for display)

var hasLoaded = false;
 
window.onload=fillInRows;
 
function fillInRows()

{

    hasLoaded = true;

    addRowToTable();
 
}
 
// CONFIG:

// myRowObject is an object for storing information about the table rows

function myRowObject(one, two, three, four,five)

{

    this.one = one; // text object

    this.two = two; // input text object

    this.three = three; // input checkbox object

    this.four = four; // input radio object

    this.five = five;

}
 
/*

 * insertRowToTable

 * Insert and reorder

 */

 function addRowToTable()

{

  var tbl = document.getElementById(TABLE_NAME);

  var lastRow = tbl.rows.length;

  // if there's no header row in the table, then iteration = lastRow + 1

  var iteration = lastRow;

  var row = tbl.insertRow(lastRow);
 
  // serial numbering

  var cell0 = row.insertCell(0);

  var textNode = document.createTextNode(iteration);

  cell0.appendChild(textNode);
 
  //check box

  var cell1 = row.insertCell(1);

  var chkbox = document.createElement('input');

chkbox.type='checkbox';

cell1.align="center";

cell1.height="39px";

cell1.appendChild( chkbox);
 
  // text box1

  var cell2 = row.insertCell(2);

  var tl = document.createElement('input');

  tl.type = 'text';

  tl.name = 'txtRow' + iteration;

  tl.id = 'txtRow' + iteration;

  tl.size = 5;
 
 // el.onkeypress = keyPressTest;

  cell2.appendChild(tl);
 
  //textbox 2

   var cell3 = row.insertCell(3);

  var t2 = document.createElement('input');

  t2.type = 'text';

  t2.name = 'txtRow1' + iteration;

  t2.id = 'txtRow1' + iteration;

  t2.size = 5;

   cell3.appendChild(t2);
 
 // el.onkeypress = keyPressTest;
 
 var cellrad = row.insertCell(4);

  var rad = document.createElement('input');

rad.type = 'radio';

rad.name ='r[i]';

//rad.value='ngfhfghgf';

var lab = document.createTextNode("HAI");

var lab1 = document.createElement('label');

lab1.appendChild(lab);

cellrad.appendChild(rad);

cellrad.appendChild(lab1);
 
row.myRow = new myRowObject(textNode, chkbox, tl,t2, rad);
 
// CONFIG: this entire function is affected by myRowObject settings

// If there isn't a checkbox in your row, then this function can't be used.

function deleteChecked()

{

    if (hasLoaded) {

        var checkedObjArray = new Array();

        var cCount = 0;
 
        var tbl = document.getElementById(TABLE_NAME);

        for (var i=0; i<tbl.tBodies[0].rows.length; i++) {

            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) {

                checkedObjArray[cCount] = tbl.tBodies[0].rows[i];

                cCount++;

            }

        }

        if (checkedObjArray.length > 0) {

            var rIndex = checkedObjArray[0].sectionRowIndex;

            deleteRows(checkedObjArray);

            reorderRows(tbl, rIndex);

        }

    }

}
 
// If there isn't an element with an onclick event in your row, then this function can't be used.

function deleteCurrentRow(obj)

{

    if (hasLoaded) {

        var delRow = obj.parentNode.parentNode;

        var tbl = delRow.parentNode.parentNode;

        var rIndex = delRow.sectionRowIndex;

        var rowArray = new Array(delRow);

        deleteRows(rowArray);

        //reorderRows(tbl, rIndex);

    }

}
 
function reorderRows(tbl, startingIndex)

{

    if (hasLoaded) {

        if (tbl.tBodies[0].rows[startingIndex]) {

            var count = startingIndex + ROW_BASE;

            for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {
 
                // CONFIG: next line is affected by myRowObject settings

                tbl.tBodies[0].rows[i].myRow.one.data = count; // text
 
                // CONFIG: next line is affected by myRowObject settings

                tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; // input text
 
                // CONFIG: next line is affected by myRowObject settings

                var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); // for debug purposes

                tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0]; // for debug purposes
 
                // CONFIG: next line is affected by myRowObject settings

                tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio
 
                // CONFIG: requires class named classy0 and classy1

                tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
 
                count++;

            }

        }

    }

}
 
function deleteRows(rowObjArray)

{

    if (hasLoaded) {

        for (var i=0; i<rowObjArray.length; i++) {

            var rIndex = rowObjArray[i].sectionRowIndex;

            rowObjArray[i].parentNode.deleteRow(rIndex);

        }

    }

}
 
}

[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

16,027

Recognized Expert Moderator MVP

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

by: Rick Caborn | last post by:

Does anyone know of a way to execute sql code from a dynamically built text field? Before beginning, let me state that I know this db architecture is built solely for frustration and I hope to...

Microsoft SQL Server

Dynamically created rows in table are not following the StyleSheetrules

by: Raghuram Banda | last post by:

Hi all, I've created a table with Table Header and the table may or may not contain any rows initially. I've included a .css file in <head> section of my HTML script and I'm creating rows to...

Javascript

How do you access Table cells from code behind?

by: Richard Dixson | last post by:

I created a new C# web application. Basically all I am trying to do is create a table that consists of a few rows with two columns in each. And then to set those columns to text values from my...

ASP.NET

Code behind and onclick on html table row

by: Corno | last post by:

Hi all, I have a page with a table of which the rows have to be added dynamically. What I also want is 'code behind' the onclick event of a row (the page should be posted back to the server,...

ASP.NET

Dynamically generated Table Rows Dissappear

by: Bijoy Naick | last post by:

I have something strange going on.. My .aspx page contains a file upload control, a "Import Data" button, a "newTransactions" <asp:table>, a"SaveTrans" button and an confMsg label. First the...

ASP.NET

Shoving dynamic code in the middle of a page.

by: UJ | last post by:

I'm a newbie to this so please excuse the level of question. My question is how can I dynamically create a table in the middle of a page without having to build the entire page dynamically? I have...

ASP.NET

add table rows dynamically and scroll

by: leiño | last post by:

Hi, i am adding table rows dynamically with javascript. This works fine. The table is inside a div with scrolls, initially with 6 rows: ..... <div style='overflow:auto; width:100%;...

Javascript

How to dynamically insert rows into a Table control?

by: gnewsgroup | last post by:

I am new to the asp.net Table web control. I am using it to customize my presentation of data. I cannot implement the idea with DataGrid or GridView. Basically, I would like to have something...

ASP.NET

maximum rows added to table

by: enrique | last post by:

Does anyone know what the upper limit is to the number of rows you can dynamically add to an HTML table, using Javascript? I tried to make a table consisting of over 74,000 rows and Firefox stops...

Javascript

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

php

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

JS code to add rows dynamically in to the table

Similar topics