Rahul Prajapat

Rahul Prajapat

  • NA
  • 1.6k
  • 638.1k

want to delete tablerow

Jul 8 2015 10:41 PM
i have a table .
 
<table id="memberInfo">
<tr>
<th>
Name
</th>
<th>
Gender
</th>
<th>
Age
</th>
<th>
Unique Mark
</th>
<th>
Relation
</th>
</tr>
<tr>
<td>
<asp:TextBox CssClass="styleTxtBox" name="Name" ID="TextBox3" Width="90px" placeholder="Name"
runat="server"></asp:TextBox>
</td>
<td>
<asp:DropDownList ID="DropDownList2" CssClass="styleTxtBox" Width="70px" runat="server">
<asp:ListItem Text="Male" Selected="True" Value="1"></asp:ListItem>
<asp:ListItem Text="Female" Value="0"></asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:TextBox CssClass="styleTxtBox" ID="TextBox5" Width="60px" placeholder="Age"
runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox CssClass="styleTxtBox" ID="TextBox6" Width="200px" placeholder="Unique Mark"
runat="server"></asp:TextBox>
</td>
<td>
<asp:TextBox CssClass="styleTxtBox" ID="TextBox7" Width="120px" placeholder="Relation"
runat="server"></asp:TextBox>
</td>
<td>
<a onclick="AddMember('memberInfo')" style="cursor: pointer;" title="Add more template">
<img src="icon/plus.png" /></a>
</td>
</tr>
</table>
 
and a javascript method to add new row in table
 
<script type="text/javascript">
var count = 1;
function AddMember(in_tbl_name) {
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
// create table cell 1
var td1 = document.createElement("TD")
var strHtml2 = "<input type=\"text\" name=\"Name\" class=\"styleTxtBox\" placeholder=\"Name\" style=\"width: 90px;\" />";
td1.innerHTML = strHtml2.replace(/!count!/g, count);
// create table cell 2
var td2 = document.createElement("TD")
var strHtml3 = "<select class=\"styleTxtBox\" style=\"width:70px;\" name=\"Gender\"><option value=\"1\" selected=\"selected\">Male</option><option value=\"0\">Female</option></select>";
td2.innerHTML = strHtml3.replace(/!count!/g, count);
// create table cell 3
var td3 = document.createElement("TD")
var strHtml4 = "<input type=\"text\" name=\"Age\" class=\"styleTxtBox\" placeholder=\"Age\" style=\"width: 60px;\" />";
td3.innerHTML = strHtml4.replace(/!count!/g, count);
// create table cell 4
var td4 = document.createElement("TD")
var strHtml5 = "<input type=\"text\" name=\"Unique\" class=\"styleTxtBox\" placeholder=\"Unique Mark\" style=\"width: 200px;\" />";
td4.innerHTML = strHtml5.replace(/!count!/g, count);
// create table cell 5
var td5 = document.createElement("TD")
var strHtml6 = "<input type=\"text\" name=\"Relation\" class=\"styleTxtBox\" placeholder=\"Relation\" style=\"width: 120px;\" />";
td5.innerHTML = strHtml6.replace(/!count!/g, count);
// create table cell 6
var td6 = document.createElement("TD")
var strHtml7 = "<a title=\"remove template\" name=\"AddMemberMore\" style=\"cursor: pointer;\" onclick=\"delRow()\" ><img src=\"icon/minus.png\"></img></a>";
td6.innerHTML = strHtml7.replace(/!count!/g, count);
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
row.appendChild(td5);
row.appendChild(td6);
count = parseInt(count) + 1;
// add to count variable
// append row to table
tbody.appendChild(row);
}
</script>
 
Now my question is that i want to delete a perticular row on click of minus image by javascript method.
thanks in advance

Answers (4)