当前位置:编程学习 > C#/ASP.NET >>

asp.net页面中的table怎么动态的增加一行

asp.net页面中的table怎么动态的增加一行 asp.net --------------------编程问答-------------------- 我用的是vs2010,c#+asp开发 --------------------编程问答-------------------- 直接用jquery append一行<tr> --------------------编程问答-------------------- 客户端可以用js动态的添加行。也可以在后台通过绑定的形式,动态的添加行。 --------------------编程问答-------------------- 我是菜鸟啊
js不会,怎么在后台动态绑定呢
我有一个button的触发事件,点击后table自动添加一行

引用 3 楼 guwei4037 的回复:
客户端可以用js动态的添加行。也可以在后台通过绑定的形式,动态的添加行。
--------------------编程问答-------------------- 这是一个repeater后台动态添加行的例子。http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html
不过一般都是用jquery在前台动态添加行。 --------------------编程问答--------------------
我先看看
太感激了,谢谢。。。 --------------------编程问答-------------------- 使用jquery的append  或appendto 动态添加 --------------------编程问答-------------------- 楼上几个在说什么。。。。。。。。。。。 --------------------编程问答-------------------- GridView吗?你可以用Button操作一个Session["table"]的datatable,添加一行新的就往里面添加一条空数据绑定就行了。。这样也避免了多数据库的消耗。。 --------------------编程问答--------------------

<%@ 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\">电话号码</option>";
                $str += "<option value=\"2\">家庭电话</option>";
                $str += "<option value=\"3\">办公电话</option>";
                $str += "<option value=\"4\">手机号码</option>";
                $str += "<option value=\"19\">自定义</option></select>";
                $str += "<input name=\"\" type=\"text\" class=\"input_text1\" />";
                $str += "<a class=\"del\" onclick=\"getDel(this)\" >删除</a> | <a class=\"mod\" id=\"getAtr\">添加</a>";
                $str += "<p class=\"f1\">常用号码</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">
                    联系人:
                </td>
                <td class="txt2">
                    <input name="" type="text" class="input_text" />
                </td>
            </tr>
            <tr class="bd_no2">
                <td class="txt1">
                    电话:
                </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="蒋颁" class="inputselect_txt" />
                                    <select name="Items" onchange="changeText()" class="select_txt">
                                        <option value="1">电话号码</option>
                                        <option value="2">家庭电话</option>
                                        <option value="3">办公电话</option>
                                        <option value="4">手机号码</option>
                                        <option value="19">自定义</option>
                                    </select>
                                    <input name="" type="text" class="input_text1" />
                                    <a class="del">删除</a> | <a class="mod" id="getAtr">添加</a>
                                    <p class="f1">
                                        常用号码</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

--------------------编程问答-------------------- 一个以前的小例子  自己去看吧 --------------------编程问答-------------------- 如果用js添加的好像在提交的时候表单的时候没有办法获取到添加的行的吧 --------------------编程问答-------------------- js添加行! --------------------编程问答-------------------- 参考:http://bbs.csdn.net/topics/390440067 --------------------编程问答-------------------- 我按照这个例子写了一个点击button就给表格添加一行的代码
但是我点击button的时候,新添加的一行只是一闪而过,屏幕闪一下就又恢复原来的内容
这是什么原因呢?我也比对了下http://bbs.csdn.net/topics/390440067这个例子
代码是差不多的


引用 10 楼 a471278514 的回复:

<%@ 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\">电话号码</option>";
                $str += "<option value=\"2\">家庭电话</option>";
                $str += "<option value=\"3\">办公电话</option>";
                $str += "<option value=\"4\">手机号码</option>";
                $str += "<option value=\"19\">自定义</option></select>";
                $str += "<input name=\"\" type=\"text\" class=\"input_text1\" />";
                $str += "<a class=\"del\" onclick=\"getDel(this)\" >删除</a> | <a class=\"mod\" id=\"getAtr\">添加</a>";
                $str += "<p class=\"f1\">常用号码</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">
                    联系人:
                </td>
                <td class="txt2">
                    <input name="" type="text" class="input_text" />
                </td>
            </tr>
            <tr class="bd_no2">
                <td class="txt1">
                    电话:
                </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="蒋颁" class="inputselect_txt" />
                                    <select name="Items" onchange="changeText()" class="select_txt">
                                        <option value="1">电话号码</option>
                                        <option value="2">家庭电话</option>
                                        <option value="3">办公电话</option>
                                        <option value="4">手机号码</option>
                                        <option value="19">自定义</option>
                                    </select>
                                    <input name="" type="text" class="input_text1" />
                                    <a class="del">删除</a> | <a class="mod" id="getAtr">添加</a>
                                    <p class="f1">
                                        常用号码</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

--------------------编程问答--------------------
引用 2 楼 caozhy 的回复:
直接用jquery append一行<tr>
--------------------编程问答-------------------- JS或者Jquery不是都可以吗? --------------------编程问答--------------------
引用 12 楼 liquidsnake_ipod 的回复:
如果用js添加的好像在提交的时候表单的时候没有办法获取到添加的行的吧

可以添加属性,怎么会获取不到。 --------------------编程问答-------------------- jquery随便append,input标签输入的数据,有name怎么获取不到。
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,