Hi,
I have created table structure using <div> tag as follows
-- 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
<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
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