How do i increase the rows in the table which has a delete option on each row

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html>

<html>

<head>

<style>

table,td

{

border:1px solid #393;

}

</style>

</head>

<body>
 
<p>Click the buttons to create and delete row(s) for the table.</p>
 
<table id="myTable">

<tr>

<td>No</td>

<td>Description</td>

<td>Unit Price</td>

<td>Quantity</td>

<td>Amount</td>

<td>Delete row</td>

</tr>
 
<tr>

<td><input type="text" size = "2" name="no" placeholder="  No" ></td>

<td><input type="text"   name="description" placeholder="  Description" ></td>

<td><input type="text"   name="unit_price" placeholder="  Unit Price" ></td>

<td><input type="text"   name="quantity" placeholder="  Qty" ></td>

<td><input type="text"   name="amount" placeholder="  Amount" ></td>

<td><input type="button" value="Delete" onclick="deleteRow(this)"></td>

</tr>

</table><p>
 
<hr></hr>
 
<button onclick="myCreateFunction()">Create row</button> 
 
<script>

function myCreateFunction()

{

var table = document.getElementById("myTable"); 

  {
 
var a = '';

var b = '';

var c = '';

var d = '';

var e = '';

 for(var i = 1; i <= 1; i++)

 {

    a += '<input type="text"   name="no'+i+'" placeholder="  No'+i+'" >';

    b += '<input type="text"   name="description'+i+'" placeholder="  Description'+i+'" >'; 

    c += '<input type="text"   name="unit_price'+i+'" placeholder="  Unit Price'+i+'" >';

    d += '<input type="text"   name="quantity'+i+'" placeholder="  Qty'+i+'" >';  

    e += '<input type="text"   name="amount'+i+'" placeholder="  Amount'+i+'" >'; 

    f += '<input type="button"  name = "delete '+i+'" value="Delete'+i+'" onclick="deleteRow(this)'+i+'">';

    }
 
  var row = table.insertRow(-1);

  var cell1 = row.insertCell(0);

  var cell2 = row.insertCell(1);

  var cell3 = row.insertCell(2);

  var cell4 = row.insertCell(3);

  var cell5 = row.insertCell(4);

  var cell6 = row.insertCell(5);
 
  cell1.innerHTML =  a;

  cell2.innerHTML =  b;

  cell3.innerHTML =  c;

  cell4.innerHTML =  d;

  cell5.innerHTML =  e;

  cell6.innerHTML =  f;
 
  }

}
 
function deleteRow(r)

{

var x = r.parentNode.parentNode.rowIndex;

document.getElementById("myTable").deleteRow(x);

}
 
</script>
 
</body>

</html>
 
<table> 

    <tr> 

    <td><input type="text" onblur="calcTotal(this, 'tot')" /></td> 

    <td><input type="text" onblur="calcTotal(this, 'tot1')" /></td> 

    </tr> 

    <tr>     

    <td><input type="text" onblur="calcTotal(this, 'tot')" /></td> 

    <td><input type="text" onblur="calcTotal(this, 'tot1')" /></td> 

    </tr> 

    <tr>     

    <td><input type="text" onblur="calcTotal(this, 'tot')" /></td> 

    <td><input type="text" onblur="calcTotal(this, 'tot1')" /></td>        

    </tr> 

    <tr>     

    <td><input type="text" id="tot" /></td> 

    <td><input id="tot1" type="text" /></td> 

    </tr>    

    </table>

Aug 1 '14 #1

Subscribe Post Reply

✓ answered by Dormilich

why would you do that?

1461

Dormilich

8,658

Expert Mod 8TB

why would you do that?

Aug 1 '14 #2

Eddu

i choose to do that because i want to create additional rows on the click of the button. Each row should have a delete button

Aug 1 '14 #3

Dormilich

8,658

Expert Mod 8TB

so you want to know how to add rows? (your "description" is ambiguous in this regard)

Aug 1 '14 #4

Eddu

Pardon my ambiguity, I do want to add rows. Could you help me out

Aug 1 '14 #5

Dormilich

8,658

Expert Mod 8TB

see line #65, that’s where you create a row. adapt that part and bind it to a click event.

Aug 1 '14 #6

Eddu

I have changed the value to a positive integer and it did not create any row. what do you mean by a click event? Thanks

Aug 1 '14 #7

Dormilich

8,658

Expert Mod 8TB

when you hit a button a click event is emitted. and you need these events to react to them.

Aug 1 '14 #8

Eddu

Could you please edit the code so i could understand better. My javascript skills(rookie). Thanks

Aug 1 '14 #9

Dormilich

8,658

Expert Mod 8TB

you wouldn’t understand a bit if I did that.

nevertheless, understanding events in JS is crucial since all user interaction depends on that.

http://www.smashingmagazine.com/2012...sponding-user/

Aug 1 '14 #10

Eddu

Thanks dude for you time

Aug 1 '14 #11

Similar topics

MySQL Multi Table Delete

by: Gordon | last post by:

I have 2 tables t and t1. In this case, t1 is a copy of t. I want to delete rows from t1 based on criteria on the t table and a relationship between t ad t1 (in this case the id column). In the...

MySQL Database

multiple table delete query error

by: Ray | last post by:

Hello all, I am attempting to delete multiple rows from multiple tables as follows: DELETE FROM attachments,responses,response_lines WHERE attachments.id IN(2,7,11) AND...

MySQL Database

how to increase rows of a textarea

by: garima puri | last post by:

hi, iwant to add dynamically some rows in same textarea when a button of addRows is clicked. like,if i have 2 rows in a textarea then after clicking a button the rows must be increased to 4....

Javascript

Delete Option on a Right Click Menu?

by: Lars Netzel | last post by:

Hey! I need to make it possible for a user to delete items from a ListView. I want it to be as similar to Windows as possible so I want it to happen if I press Delete or with a RightClick menu...

Visual Basic .NET

Disable Delete option from all menus, toolbars, context menus

by: bjaeger | last post by:

A few months back I was "playing" with an Access 2000 application I created. I somehow disabled the delete option from all menus, toolbars, and context menus. Now I cannot do any maintenance on...

Microsoft Access / VBA

Delete Option grayed out

by: LillianH via AccessMonster.com | last post by:

Suddenly all of my database have the delete option grayed out when I open them. HOW do I change this. It appears the database is read only. I cannot delete tables, modify queries , etc. I...

Microsoft Access / VBA

Trigger: After Delete ... for each row behaviour

by: ChrisC | last post by:

Hello, I am attempting to create a trigger to keep track of changes to a table, mainly about specific changes to the data in the table. I had hoped that triggers defined as for each row would...

DB2 Database

delete option in aspx for mysql database with confirmation prompt

by: rajsrmc | last post by:

hello pals! i am using mysql database connected in grid view with aspx pages how to use delete option with check boxes (like hotmail inbox) suggestions will be really helpful thanks in advance

ASP.NET

How can i make a datagrid view in php file with edit and delete option ?

by: pragal | last post by:

Hi to all, I am new to php I am making a new web site, I want to display a table value in data grid view in a php page with edit and delete option for all values of the table. Please help me with...

PHP

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

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

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,...

C / C++

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

Online Marketing