The asp.net page in the table how to dynamically add a row

The asp.net page in the table how to dynamically add a row

Started by Gene at February 01, 2016 - 12:11 AM

I use VS2010, c#+asp development

Posted by Gene at February 06, 2016 - 12:41 AM

The direct use of jQuery append line<tr>

Posted by Teresa at February 17, 2016 - 12:45 AM

The client can use the add JS dynamic. Can also be bound form in the background, add line dynamic.

Posted by Abigail at February 25, 2016 - 12:52 AM

I was a rookie.
JS does not, how in the background of dynamic binding.
I have a triggering event of a button, click table to automatically add a line

Posted by Gene at November 14, 2016 - 7:24 PM

This is a repeater background dynamically adding for example.
But is generally add rows in the foreground dynamic jquery.

Posted by Abigail at November 26, 2016 - 7:46 PM


Let me have a look
Very grateful, thank you. . .

Posted by Gene at December 06, 2016 - 7:53 PM

The use of jQuery append or appendto dynamically add

Posted by Alexander at December 19, 2016 - 8:40 PM

What some say upstairs. . . . . . . . . . .

Posted by Hale at December 28, 2016 - 8:52 PM

GridView? You can use Button to operate a Session["table"] datatable, add a new row is to add an empty data binding on the line.. It also avoids the multi database consumption. .

Posted by Alina at December 29, 2016 - 8:55 PM

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="jquery-1.7.min.js" type="text/javascript"></script>

    <script>
        $(function() {
            $("#getAtr").click(function() {
                $str = '';
                $str += "<tr>";
                $str += "<td><input name=\"ItemAddInput\" style=\"display:none;\" type=\"text\" class=\"inputselect_txt\" /><select name=\"Items\" onchange=\"changeText(this)\" class=\"select_txt\">";
                $str += "<option value=\"1\">Telephone number</option>";
                $str += "<option value=\"2\">Home phone</option>";
                $str += "<option value=\"3\">Office telephone</option>";
                $str += "<option value=\"4\">Phone number</option>";
                $str += "<option value=\"19\">Custom</option></select>";
                $str += "<input name=\"\" type=\"text\" class=\"input_text1\" />";
                $str += "<a class=\"del\" onclick=\"getDel(this)\" >Delete the </a> & nbsp; |& nbsp; <a class=\ "mod\" id=\ "getAtr\" > add</a>";
                $str += "<p class=\"f1\">Commonly used number</p>";
                $str += "</td>";
                $str += "</tr>";
                $("#addTr").append($str);
            });
        });

        function getDel(k) {
            $(k).parent().remove();
        }

        function changeText() {
            var tbd = document.getElementById("addTr").childNodes; //tr

            if (tbd != null && tbd.length > 0) {
                for (var i = 0; i <tbd.length; i++) {
                    if (i > 0) {
                        if (tbd[i].childNodes[0].childNodes[1].value == "19") {
                            tbd[i].childNodes[0].childNodes[0].style.display = "block";
                        }
                    } else {
                        //alert(tbd[i].childNodes[0].childNodes[2].value + ",,,,,," + i);
                        if (tbd[i].childNodes[0].childNodes[2].value == "19") {
                            tbd[i].childNodes[0].childNodes[0].style.display = "block";
                        }
                    }
                }
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table border="1" cellspacing="0" cellpadding="0" class="mod_bd">
            <tr class="bd_no1">
                <td class="txt1">
                    Contacts: 
                </td>
                <td class="txt2">
                    <input name="" type="text" class="input_text" />
                </td>
            </tr>
            <tr class="bd_no2">
                <td class="txt1">
                    Telephone: 
                </td>
                <td class="txt2">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tbody id="addTr">
                            <tr>
                                <td>
                                    <input name="ItemAddInput" style="display: none;" type="text" value="Jiang Ban" class="inputselect_txt" />
                                    <select name="Items" onchange="changeText()" class="select_txt">
                                        <option value="1">Telephone number</option>
                                        <option value="2">Home phone</option>
                                        <option value="3">Office telephone</option>
                                        <option value="4">Phone number</option>
                                        <option value="19">Custom</option>
                                    </select>
                                    <input name="" type="text" class="input_text1" />
                                    <a class="del">Delete the </a> & nbsp; |& nbsp; <a class= "mod" id= "getAtr" > add</a>
                                    <p class="f1">
                                        Commonly used number</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

Posted by Arnold at December 30, 2016 - 9:05 PM

To see a former small example yourself.

Posted by Arnold at January 01, 2017 - 9:54 PM

If you use js to add it at the time of submission form when there is no way to add the line.

Posted by Richie at January 03, 2017 - 10:32 PM

JS add the lineļ¼

Posted by Phil at January 05, 2017 - 10:38 PM

Reference resources

Posted by Oswald at January 06, 2017 - 11:14 PM