从表中删除选定的行 [英] Remove selected row from table

问题描述

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();


}

请帮我解决这个问题



感谢All



Shaju

Please help me to solve this

Thanks to All

Shaju

推荐答案

（ ＃cntContacts）。val（）;

num = parseInt （num）+ 1 ;

("#cntContacts").val(); num = parseInt(num) + 1;

（ ＃cntContacts）。val（num）;
var rowId = contact + num;

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

（ ＃tblContact） .append（ < div class ='divRow'>）;

("#tblContact").append("<div class='divRow'>");

这篇关于从表中删除选定的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！