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>Untitl ed Document</title>

<script language="JavaS cript">
function addRow1(id){
var tbody = document.getEle mentById
(id).getElement sByTagName("TBO DY")[0];

var row = document.create Element("TR")
var td1 = document.create Element("TD")

var chkbox = document.create Element('input' );
chkbox.type='Ch eckbox';
td1.align="cent er";
td1.height="39p x";
td1.appendChild ( chkbox);

var td2 = document.create Element("TD")
var newTextBox = document.create Element('input' );
newTextBox.type = 'text';
newTextBox.size ="2" ;
td2.align="cent er";
td2.appendChild (newTextBox)

var td3 = document.create Element("TD")
var newTextBox = document.create Element('input' );
newTextBox.type = 'text';
newTextBox.size ="2" ;
td3.align="cent er";
td3.appendChild (newTextBox)

var td4 = document.create Element("TD")
var newTextBox = document.create Element('input' );
newTextBox.type = 'text';
newTextBox.size ="2" ;
td4.align="cent er";
td4.appendChild (newTextBox)

var td5 = document.create Element("TD")
var newTextBox = document.create Element('input' );
newTextBox.type = 'text';
newTextBox.size ="2";
td5.align="cent er";
td5.appendChild (newTextBox)

var td6 = document.create Element("TD")
var newTextBox = document.create Element('input' );
newTextBox.type = 'text';
newTextBox.size ="7" ;
td6.align="cent er";
td6.appendChild (newTextBox)

var td8 = document.create Element("TD")
var newRadio = document.create Element('<input name="mmmkk" value="Yes" type="radio" id="yes">');
newRadio.type = 'radio';
var btn=document.cr eateElement('in put');
btn.type='submi t';
btn.value='Edit ';
newRadio.value= 'y';
newRadio.name=" YES"

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

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

var td7 = document.create Element("TD");
var newTextBox = document.create Element('input' );
newTextBox.type = 'text';
newTextBox.size ="4" ;
td7.align="cent er";
td7.appendChild (newTextBox)

var td9 = document.create Element("TD")
var newTextBox = document.create Element('input' );
newTextBox.type = 'textarea';
newTextBox.Text Mode='MultiLine ';
td9.align="cent er";

td9.appendChild (newTextBox)

var td10 = document.create Element("TD")
var newTextBox = document.create Element('input' );
newTextBox.type = 'text';
newTextBox.text mode='MultiLine ';
td10.align="cen ter";
newTextBox.rows ="15";
td10.appendChil d (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.appendChi ld(row);
}
</script>

</head>

<body >

<table>
<tr>
<td>

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

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

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

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

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

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

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

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

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

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

<td align="center" valign="top" width="14%">Com ments
</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="addRow 1('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

3196

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

Similar topics

6218

executing sql code from text field or from multiple varchar(8000) rows in a table

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 make it better soon. Unfortunately, there is never a non-crucial time in which we can do an upgrade, so we are stuck for now. Point 1: There are multiple tables: students, courses, cross-reference

Microsoft SQL Server

3597

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 the table dynamically using JavaScript (using DOM), and the problem is those created bby DOM are not following style sheet rules applicable for table rows and cells. But the rows created from within

Javascript

36880

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 code behind. However I am not able to do this at all, I am going about this wrong, I think and need guideance. If this was just straight HTML I would do this: <table> <tr><td>field 1</td><td>value 1 set by code behind</td></tr>

ASP.NET

12233

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, which should handle the onclick). However, as the rows are added dynamically, I cannot give them an ID at designtime and attach a function to it. Is there a way to write one function for all added rows but that is able to distinguish which of the...

ASP.NET

2891

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 user selects a file, then clicks Import Data. The page now reads the PostedFile and displays each line as a new row in the newTransactions table. All of this works fine. For now, I've programmed SaveTrans_Click to display the number of rows in the...

ASP.NET

1458

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 code to build the string that will generate the table. (This is all to solve the problem of when a person clicks a checkbox in a datagrid, there's no way of knowing what record it belongs to - see my previous post) Here's what my code would...

ASP.NET

13564

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%; height:100;'> <table> <tr><td>nothing</tr></td> <tr><td>nothing</tr></td>

Javascript

3289

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 like what is shown in the following PNG image. http://farm3.static.flickr.com/2183/1805431357_1facb1ed9b_o.png I know how to dynamically add rows to the end of the table, but how do

ASP.NET

7821

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 rendering the page. I didn't notice any exceptions being thrown or any other external indicator that something is wrong, other than the page not being rendered all the way. If you happen to know if there is a number to this I should be aware...

Javascript

9587

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9423

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10211

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10045

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9863

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7406

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 presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6672

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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5298

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5447

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET