How to dynamically add tables along with dynamic addition of rows using add and delete buttons for both?

Question

MY JAVASCRIPT CODE

var a1=0;
var count=1;
function addRow(data)
    {
        var table = document.getElementById('student');
        var rowCount = table.rows.length;
        var col = table.rows[2].cells.length;
        var del = (data.id);
        var row = table.insertRow(rowCount);
        for(i=0;i<col;i++)
        {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[2].cells[i].innerHTML; 
        }       
    }

function addst(data)
  {
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
    var row =  table.insertRow(rowCount);
    row.innerHTML = '&nbsp;';
    for(i=0;i<3;i++)
        {   
            var row = table.insertRow(rowCount+i+1);
            row.innerHTML = table.rows[i].innerHTML;    
            if(i==0)
            {
                row.id="st"+a1+"";
            }
        }       
    count++;
}

function delRow(data) 
{
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
        var p=data.parentNode.parentNode;
        p.parentNode.removeChild(p);
}

function delst(data)
{
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
    var p = document.getElementById(eq01);
    table.removeChild(p);
}

MY HTML CODE

<fieldset>
<legend align="center">Student Information</legend> 
<br>
<table id="student">
    <tr id="s1">        
        <th><select name="" width="250px"> 
        <option value="" selected align="center">student Type</option>
        <option value="">male</option>
        <option value="">female</option>
        </select></th>
        <th><input type="button" value="+" onclick="addst(this)"/>
        <th><input type="button" value="-" onclick="delst(this)"/>
    </tr>

    <tr id="label">
        <th align="left">class info</th>
        <th align="left">Math</th>
        <th align="left">Phy</th>
        <th align="left">Chem</th>
        <th align="left">Total</th>
        <th align="left">Average</th>   
    </tr>
    <tr id="c1">
        <td>
            <select> 
                <option value="" selected>Select your class</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
            </select>
        </td>

        <td><input type="text" id="val02" size="16" name="math" placeholder="Math marks"/></td>
        <td><input type="text" id="val03" size="16" name="phy" placeholder="Phy marks"/></td>
        <td><input type="text" id="val04" size="16" name="chem" placeholder="Chem marks"/></td>
        <td><input type="text" id="val06" size="16" name="total" placeholder="Total marks"/></td>
        <td><input type="text" id="val07" size="16" name="avg" placeholder="Average marks"/></td>
        <th><input type="button" value="+"  id="r1" onclick="addRow(this)" /></th>          
        <th><input type="button" value="-"  id="r1" onclick="delRow(this)" /></th>
    </tr>
</TABLE>
</fieldset>

The 'addst' and 'addRow' functions are working but have no idea about how delete functions should be written....can u guys please help me out

'delst' should delete the whole respective student information while 'delRow' should delete the each individual row

posted just check it.....no idea what to use for delst....can u help me out? — Nani
– Nani, Commented Dec 14, 2015 at 7:30
Post your full code. So many variables are showing undefined. Look at you console — Sanjay Kumar N S
– Sanjay Kumar N S, Commented Dec 14, 2015 at 7:33
hey sanjay check now i have declared the variables...it should work now!! — Nani
– Nani, Commented Dec 14, 2015 at 7:37

Anshuk · Accepted Answer · 2015-12-14 07:38:05Z

1

You have written a function that name DeleteRow but you are calling delRow(this) in the click event. because of that you are getting error.

answered Dec 14, 2015 at 7:38

Anshuk

918 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nani Over a year ago

i have changed it now delRow is working but delst is not :p

ashkufaraz · Accepted Answer · 2015-12-14 07:46:19Z

0

Try like this

function delst(data)
{ 
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
    var p=data.parentNode.parentNode;
    p.parentNode.removeChild(p);
}

answered Dec 14, 2015 at 7:46

ashkufaraz

5,2997 gold badges54 silver badges85 bronze badges

1 Comment

Nani Over a year ago

I tried it before itself but it deletes only the present row but i want to delete the whole part of student information!!

Anshuk · Accepted Answer · 2015-12-15 06:06:44Z

0

Please bind each data in separate table and then try to delete that table under row. it will easy to delete parent child elements. example:

<table>
<tr>
<td>
<table><tr><!--your row data--><td></td></tr></table>
</td>
</tr>
</table>

answered Dec 15, 2015 at 6:06

Anshuk

918 bronze badges

2 Comments

Nani Over a year ago

Dude i tried it, 'delst' is working but 'addRow' is not working all new rows are adding to the first table itself as I couldn't get a reference for the next created table. Can u help me out?

Anshuk Over a year ago

Hi Nani, Please go through this link. may be this will help you :) viralpatel.net/blogs/…

Collectives™ on Stack Overflow

How to dynamically add tables along with dynamic addition of rows using add and delete buttons for both?

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related