Click here to Skip to main content
15,880,796 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
Hi,

I have created table structure using <div> tag as follows

-- css 

CSS
.divTable
    {
        display:  table;
        width:auto;
        background-color:#D9EDF7;
        border:1px solid  #D9EDF7;
        border-spacing:5px;
      
    }

    .divRow
    {
       display:table-row;
       width:auto;

    }

 .divCellHidden
    {
        float:left;
        display:table-column;
        width:200px;
        background-color:#DFF0D8;
        display:none;
    }
    
    .divCell
    {
        float:left;
        display:table-column;
        width:200px;
        background-color:#DFF0D8;

    }
    .divActionCell
    {
        float:left;
        display:table-column;
        width:26px;
        background-color:#DFF0D8;
    }

-- html

HTML
<div class="divTable" id="tblContact">
    <div class="headRow">
    <div class="divCellHidden" align="center">IsPrimary</div>
    <div class="divCell" align="center">Name</div>
    <div  class="divCell">Contact Number</div>
    <div  class="divCell">Mail</div>
    <div  class="divCell">Designation</div>
    <div class="divCell">Action</div>
    </div>
</div>

and i have place one Add button <input type='button' onclick="javascript:abc.addContact();">  to add the row dynamically

the following is the code in addContact, its a external .js file

JavaScript
abc.addContact = function () {
    
    var num = $("#cntContacts").val();

    num = parseInt(num) + 1;
    $("#cntContacts").val(num);
    var rowId = "contact" + num;

    $("#tblContact").append("<div class='divRow'>");
    $("#tblContact").append("<div name='primary' class='divCellHidden' id='" + rowId + "'>" + isprimary + "</div>");
    $("#tblContact").append("<div class='divCell ' id='" + rowId + "'>" + contactname + "</div>");
    $("#tblContact").append("<div class='divCell '  id='" + rowId + "'>" + mobile + "</div>");
    $("#tblContact").append("<div class='divCell '  id='" + rowId + "'> " + email + "</div>");
    $("#tblContact").append("<div class='divCell '  id='" + rowId + "'>" + Designation + "</div>");


    $("#tblContact").append("<div class='divActionCell'><button class='btn' onclick='javascript:abc.contactTableClick()'></button></div>");
    $("#tblContact").append("<div class='divActionCell'><button class='btn' id='btnDelete' onclick='javascript:abc.contactRowDelete(" + rowId + ")'></button></div>");

    $("#tblContact").append("</div>");
}

it working fine but i am unable to remove a row from the table using the button 'btnDelete'

Delete Code 

<pre>abc.contactRowDelete = function (rowid) {
    var s = $(rowid)
    var te = $(rowid).val();
    alert(s);
    alert(te);
    var r = $(rowid);
    r.fadeOut();


}

Please help me to solve this

Thanks to All

Shaju
Posted
Updated 19-Dec-13 18:20pm
v2
Comments
creepz03 19-Dec-13 22:22pm    
Where is your code for the delete?
ShajuAntony 19-Dec-13 23:59pm    
abc.contactRowDelete = function (rowid) {
var s = $(rowid)
var te = $(rowid).val();
alert(s);
alert(te);
var r = $(rowid);
r.fadeOut();


}
[no name] 19-Dec-13 22:51pm    
Repeating creepz03: What happens in 'btnDelete'?
JoCodes 19-Dec-13 23:33pm    
Post your delete code which you tried
ShajuAntony 19-Dec-13 23:59pm    
abc.contactRowDelete = function (rowid) {
var s = $(rowid)
var te = $(rowid).val();
alert(s);
alert(te);
var r = $(rowid);
r.fadeOut();


}

You are missing
.remove()
method in the delete script . Add it for the row which needs to be deleted.
 
Share this answer
 
U need to find the row using Jquery selector which u want to delete and then use remove method inside btnDelete click event.

Show me your dynamically generated html Table so that i can provide you the exact code.

Hope, this will helps you...
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900