Jump to content

dynamic table function using javascript


Recommended Posts

currently i am trying to create a dynamic table which consist 2 column name amount when i select a name from ddl n clickon add button its add the user in row and show the RESULTAMOUNT in amount cell i want when i add user then it shows RESULTAMOUNT=totalamount/totalrow in each i am getting last result i want the data like this\ total amount=100 name-----------------Amount----john------------------25------neo------------------25-------nets------------------25-----seo-------------------25----- if i again add new row then it again splits 100/5 and update all cells please help me

Link to post
Share on other sites

yes ihave the code .......and everything working properly except the updation cell function here is code <%@ Page Title="" Language="C#" MasterPageFile="~/RegisteredUserChild.master" AutoEventWireup="true" CodeBehind="ReportSharedBillPart2.aspx.cs" Inherits="BillMerge.ReportSharedBillPart2" %> <asp:Content ID="Content00" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server"> <%--<script type="text/javascript"> function displayResult() { document.getElementById("table1").deleteRow(0);// var row = button.parentNode.parentNode;// var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];// tbody.removeChild(row); } </script>--%> <script type="text/javascript"> function RemoveSelectItemFromDdl(ddlID) { var DdlParticipant = document.getElementById('<%=DdlParticipant.ClientID %>'); if (DdlParticipant.options.length > 0) { for (var i = DdlParticipant.length - 1; i >= 0; i--) { if (DdlParticipant.selected) { DdlParticipant.remove(i); return false; } } } } function RemoveSelectedUserFromParticipantDdl() { document.getElementById('<%=DdlParticipant.ClientID %>').addEventListener("change", function (select) {if (this.value != "") { var select2 = document.getElementById('<%=DdlShareBillParticipant.ClientID %>'); for (var i = 0; i < select2.options.length; i++) { if (this.value == select2.options.value) { select2.options = null; break; } } } }, false); } function RemoveSelectItemFromParticipantDdl(tableID) { var DdlShareBillParticipant = document.getElementById('<%=DdlShareBillParticipant.ClientID %>'); if (DdlShareBillParticipant.options.length > 0) { for (var i = DdlShareBillParticipant.length - 1; i >= 0; i--) { if (DdlShareBillParticipant.selected) { DdlShareBillParticipant.remove(i); return false; } } } }// function deleteRow(tableID) {// try {// var table = document.getElementById(tableID);// var rowCount = table.rows.length;// // for(var i=0; i<rowCount; i++) {// var row = table.rows;// var chkbox = row.cells[0].childNodes[0];// if(null != chkbox && true == chkbox.checked) {// table.deleteRow(i);// rowCount--;// i--;// }// // }// }catch(e) {// alert(e);// } </script> <%--<script type="text/javascript"> function SplitAmount(tableID) { //var count =parseint( table.rows.length); var Result = document.getElementById('<%=test.ClientID%>'); var count = parseInt(document.getElementById('table1').rows.length); var TotalAmount =parseInt( document.getElementById('<%=TbAmount.ClientID%>').value); Result.value = TotalAmount / count; } </script>--%> <script type="text/javascript"> function SplitBill() { //MessageBox.Text="new;" } function AddRowInParticipantTable(tableID) { var table = document.getElementById(tableID); var rowcount = table.rows.length; var row = table.insertRow(rowcount); //var cell2 = row.insertCell(0); //cell2.innerHTML = rowcount; var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; cell1.appendChild(element1); var invoiceno = document.getElementById('<%= DdlParticipant.ClientID %>').value; element1.value = invoiceno; element1.style.color = 'gray'; element1.style.border = 'None'; element1.id = 'TbParticipantName' + rowcount; element1.style.textAlign = 'center'; element1.style.minWidth = '184px'; var cell2 = row.insertCell(1); var element2 = document.createElement("input"); element2.type = "text"; cell2.appendChild(element2); var rowcount = parseInt(table.rows.length - 1); var amount = parseInt('<%=Session["SharedAmount"]%>'); var share = amount / rowcount; element2.value = share; element2.style.color = 'gray'; element2.id = 'TbShareAmount' + rowcount; element2.style.border = 'None'; element2.style.textAlign = 'center'; var cell3 = row.insertCell(2); var element3 = document.createElement("input"); element3.type = "image"; element3.src = "../Images/BtnRemove.png"; cell3.appendChild(element3); element3.id = 'RemoveId' + rowcount; element3.OnClientClick = "AddRowUsingAddParticipant('table2')"; } function AddRowUsingAddParticipant(tableID) { var table = document.getElementById(tableID); var rowcount = table.rows.length; var row = table.insertRow(rowcount); //var cell2 = row.insertCell(0); //cell2.innerHTML = rowcount; var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; cell1.appendChild(element1); var invoiceno = document.getElementById('<%= DdlShareBillParticipant.ClientID %>').value; element1.value = invoiceno; element1.style.color = 'gray'; element1.style.border = 'None'; element1.id = 'TbParticipantName' + rowcount; element1.style.textAlign = 'center'; element1.style.minWidth = '184px'; var cell2 = row.insertCell(1); var element2 = document.createElement("input"); element2.type = "text"; cell2.appendChild(element2); var rowcount = parseInt(table.rows.length-1); var amount = parseInt('<%=Session["SharedAmount"]%>'); var share = amount / rowcount; element2.value = share; element2.style.color = 'gray'; element2.id = 'TbShareAmount' + rowcount; element2.style.border = 'None'; element2.style.textAlign = 'center'; var cell3 = row.insertCell(2); var element3 = document.createElement("input"); element3.type = "image"; element3.src = "../Images/BtnRemove.png"; cell3.appendChild(element3); element3.id = 'RemovePayeeId' + rowcount; } function AddRow(tableID) { var table = document.getElementById(tableID); var rowcount = table.rows.length; var row = table.insertRow(rowcount); //var cell2 = row.insertCell(0); //cell2.innerHTML = rowcount; var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; cell1.appendChild(element1); var invoiceno = document.getElementById('<%= DdlParticipant.ClientID %>').value; element1.value = invoiceno; element1.style.color = 'gray'; element1.style.border = 'None'; element1.id = 'TbPayeeName' + rowcount; element1.style.textAlign = 'center'; element1.style.minWidth = '184px'; var cell2 = row.insertCell(1); var element2 = document.createElement("input"); element2.type = "text"; cell2.appendChild(element2); var amount = document.getElementById('<%= TbAmount.ClientID %>').value; element2.value = amount; element2.style.color = 'gray'; element2.id = 'TbAmontPaid' + rowcount; element2.style.border = 'None'; element2.style.textAlign = 'center'; var cell3 = row.insertCell(2); var element3 = document.createElement("input"); element3.type = "image"; element3.src = "../Images/BtnRemove.png"; cell3.appendChild(element3); element3.id = 'RemovePayeeId' + rowcount; } </script> <link href="Styles/Styles.css" rel="stylesheet" type="text/css" /></asp:Content><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderUserStatus" runat="server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="Heading" runat="server"> Report Shared Bill (Step 2 Of 2) :Other Information<span class="TotalAmountGap">Total Amount :<asp:Label readonly="true" ID="ShowTotalAmount" runat="server"></asp:Label></></span></asp:Content><asp:Content ID="Content3" ContentPlaceHolderID="Content" runat="server"> <%-- -------------------------------------------Person who paid-----------------------------------------------------------------------%> <table class="TableSelectPartcipant"> <tr> <td> <asp:Label ID="label11" runat="server" Text="Select Payee" Font-Bold="true"></asp:Label> </td> <td> <asp:DropDownList ID="DdlParticipant" AppendDataBoundItems="True" runat="server" DataSourceID="FL" DataTextField="UserName" DataValueField="UserName"> <asp:ListItem Text="--Select Payee--" Value="" /> </asp:DropDownList> <asp:SqlDataSource ID="FL" runat="server" ConnectionString="<%$ ConnectionStrings:BillMergeConnectionString %>" SelectCommand="SELECT Users.UserName FROM Users INNER JOIN Friends ON Users.UserID = Friends.ToUserID OR Users.UserID=Friends.FromUserID WHERE ((Friends.FromUserID = @FromUserID) OR (Friends.ToUserID = @FromUserID)) EXCEPT SELECT Users.UserName FROM Users WHERE (Users.UserId=@FromUserID) group by Users.UserName"> <SelectParameters> <asp:SessionParameter Name="FromUserID" SessionField="UserID" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> </td> <td> <asp:TextBox ID="TbAmount" runat="server"></asp:TextBox> </td> <td> <asp:Button ID="BtnAddParticipant" runat="server" Text="Add" OnClientClick=" AddRow('table1');AddRowInParticipantTable('table2');SplitBill();RemoveSelectedUserFromParticipantDdl();RemoveSelectItemFromDdl('table1,DdlParticipant');return false;" /> <%--<asp:Button ID="Button1" runat="server" Text="Delete" OnClientClick="displayResult('table1');return false;" />--%> </td> </tr> </table> <br /> <table id="table1" style="border:1px solid #EEEEEE;" class="TableSelectPartcipant"> <tr> <th style="min-width:184px;">Payee User Name</th> <th>Amount</th> <th>Remove</th> </tr> </table><%---------------------------------------------add the person who participate------------------------------------%> <div class="line"></div> <table class="TableSelectSharedBillPartcipant"> <tr> <td> <asp:Label ID="LblPayee" runat="server" Text="Select Participant" Font-Bold="true"></asp:Label> </td> <td> <asp:DropDownList ID="DdlShareBillParticipant" AppendDataBoundItems="True" runat="server" DataSourceID="FL" DataTextField="UserName" DataValueField="UserName"> <asp:ListItem Text="--Select Participant--" Value="" /> </asp:DropDownList> <asp:SqlDataSource ID="GetFriend" runat="server" ConnectionString="<%$ ConnectionStrings:BillMergeConnectionString %>" SelectCommand="SELECT Users.UserName FROM Users INNER JOIN Friends ON Users.UserID = Friends.ToUserID OR Users.UserID=Friends.FromUserID WHERE ((Friends.FromUserID = @FromUserID) OR (Friends.ToUserID = @FromUserID)) EXCEPT SELECT Users.UserName FROM Users WHERE (Users.UserId=@FromUserID) group by Users.UserName"> <SelectParameters> <asp:SessionParameter Name="FromUserID" SessionField="UserID" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> </td> <td> <asp:Button ID="BtnAddShareBillParticipant" runat="server" Text="Add" OnClientClick="AddRowUsingAddParticipant('table2');RemoveSelectItemFromParticipantDdl('table2');return false;" /> </td> </tr> </table> <br /> <table id="table2" style="border:1px solid #EEEEEE;" class="TableSelectPartcipant"> <tr> <th style="min-width:184px;">Name Of Partcipant</th> <th>Share</th> <th>Remove</th> </tr> </table></asp:Content>

Link to post
Share on other sites

it generate the share bill of equal amount among the participant ,if my amount is 200 and i added 2 participant it gives 100 each and show it in dynamic table ,again if i add another person dynamically then it shows 66.66 for each so i made a function which divide the total amount by the row count it gives the result right in last added row but not updates the result in all amount cell....please help me

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...