首页 新闻 会员 周边

请问关于JS拼接HTML的问题!!!!!望各位大神解答！

0
[已解决问题] 解决于 2014-02-25 16:31

         function addTable() {
            var div = document.getElementById("createTable");
            var table = "";
            table += "<table>";
            table += "<tr><td>类目编号：</td><td><input id=\"categoryId\" type=\"text\" /></td></tr>";
            table += "<tr><td>类目名称：</td><td><input id=\"categroyName\" type=\"text\" /></td></tr>";
            table += "</table>";
            div.innerHTML = table;

 

<div id="createTable"></div>

 

请问，当我在按钮上点击这个函数的时候，为什么没有显示表格呢？！

风吹裤裆JJ凉的主页 风吹裤裆JJ凉 | 菜鸟二级 | 园豆：202
提问于：2014-02-23 01:15
< >
分享
最佳答案
0

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">
        function addTable() {
            var div = document.getElementById("createTable");
            var table = "";
            table += "<table>";
            table += "<tr><td>类目编号：</td><td><input id=\"categoryId\" type=\"text\" /></td></tr>";
            table += "<tr><td>类目名称：</td><td><input id=\"categroyName\" type=\"text\" /></td></tr>";
            table += "</table>";
            div.innerHTML = table;
        }
    </script>
</head>
<body>
    <input type="button" onclick="addTable();" name="name" value="创建Table" />
    <div id="createTable"></div>
</body>
</html>

测试结果：

测试没有问题啊 可能是addTable结尾没有}的原因

奖励园豆：5
wolfy | 老鸟四级 |园豆：2636 | 2014-02-23 10:24 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MyWebSite.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <title>类目</title>
    <script type="text/javascript">
        var check = document.getElementsByName("Checkbox1");

        window.onload = function () {
            for (var i = 0; i < check.length; i++) {
                check[i].onclick = chkclick;
            }
        }

        function chkclick() {
            var checkList = "";
            for (var i = 0; i < check.length; i++) {
                if (check[i].checked) {
                    checkList = checkList + check[i].value + ",";
                }
            }
            document.getElementById("HiddenField1").value = checkList.substring(0, checkList.length - 1);
        }

        function checkAll() {
            var checkList = "";
            var chk = document.getElementById("Checkbox11");
            if (chk.checked) {
                for (var i = 0; i < check.length; i++) {
                    check[i].checked = true;
                    checkList = checkList + check[i].value + ",";
                }
                document.getElementById("HiddenField1").value = checkList.substring(0, checkList.length - 1);
            }
            else {
                for (var i = 0; i < check.length; i++) {
                    check[i].checked = false;
                    document.getElementById("HiddenField1").value = "";
                }
            }
        }
        function addCategory_Win() {
            window.showModalDialog('/AddCategory.aspx', '', '');
            window.location.reload();
        }

        function deleteCategory() {
            var chckBox = document.getElementsByName("Checkbox1");
            var num = chckBox.length;
            var i = "";
            for (var index = 0; index < num; index++) {
                if (chckBox[index].checked) {
                    i++;
                }
            }
            if (i > 1) {
                alert("只能选择一条数据");
            }
            else if (i < 1) {
                alert("请选择一条数据");
            }
            else {
                if (window.confirm("数据删除无法恢复，是否删除？")) {
                    var categoryId = $("#HiddenField1").val();
                    $.ajax({
                        url: "../AjaxHandler/DeleteCategory.ashx",
                        type: "post",
                        data: {
                            "CategoryId": categoryId
                        },
                        success: function (data) {
                            if (data > 0) {
                                alert("删除成功！");
                                window.location.reload();
                            }
                            else {
                                alert("删除失败！");
                            }
                        }
                    });
                }
            }
        }

        function addTable() {
            var div = document.getElementById("createTable");
            var table = "";
            table += "<table>";
            table += "<tr><td>类目编号：</td><td><input id=\"categoryId\" type=\"text\" /></td></tr>";
            table += "<tr><td>类目名称：</td><td><input id=\"categroyName\" type=\"text\" /></td></tr>";
            table += "</table>";
            div.innerHTML = table;
            //div.innerHTML = "<tr><td>类目编号：</td><td><input id=\"categoryId\" type=\"text\" /></td></tr>";
        }


    </script>
</head>
<body>
    <form runat="server">
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <input id="AddCategory" type="button" value="添加类目" onclick="addCategory_Win();" />
        <input id="CreateTable" type="button" value="创建表格" onclick="addTable();" />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Font-Size="12px" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField HeaderText="全选/取消">
                    <HeaderTemplate>
                        <input id="Checkbox11" type="checkbox" onclick="checkAll()" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input name="Checkbox1" type="checkbox" value='<%# Eval("categoryid") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="类目编号">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("categoryid") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="类目名称">
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("categoryname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>操 作</HeaderTemplate>
                    <ItemTemplate>
                        <a href="DetailCategoryInfo.aspx?CategoryId=<%# Eval("categoryid") %>">查看</a>
                        <%--                        <asp:LinkButton ID="btnDelete" runat="server" Text="删除" CommandName="DeleteCategoryById" CommandArgument='<%# Eval("categoryid") %>' OnClientClick="return confirm('删除后无法恢复，是否删除？');"></asp:LinkButton>--%>
                        <a href="#" onclick="deleteCategory();">删除</a>
                        <a href="UpdateCategoryInfo.aspx?CategoryId=<%# Eval("categoryid") %>">修改</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
        <div id="createTable">
        </div>
</body>
</html>

我是这么写的，在页面点击按钮后，还是没有反应？！

风吹裤裆JJ凉 | 园豆：202 (菜鸟二级) | 2014-02-23 12:56

@风吹裤裆JJ凉: 我测试在ie下没问题啊  你用的什么浏览器啊？

wolfy | 园豆：2636 (老鸟四级) | 2014-02-23 16:53

@wolfy: 我搞定了！按钮我之前放到了Form里，就没有反应，我把按钮放到Form外面就OK了！谢谢你了！

风吹裤裆JJ凉 | 园豆：202 (菜鸟二级) | 2014-02-23 20:41

@风吹裤裆JJ凉: 不客气 解决问题就行

wolfy | 园豆：2636 (老鸟四级) | 2014-02-23 21:37

@wolfy:再次 谢谢你的耐心解答！

风吹裤裆JJ凉 | 园豆：202 (菜鸟二级) | 2014-02-25 16:29
其他回答(2)
0

1.js加载时机(页面加载完成触发该函数)

2.用浏览器调试看table最后的是否好的拼接字符串，对了addTable结尾没有},不知道是不是你拷贝代码的少拷了，

秋壶冰月 | 园豆：5903 (大侠五级) | 2014-02-23 10:06 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MyWebSite.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <title>类目</title>
    <script type="text/javascript">
        var check = document.getElementsByName("Checkbox1");

        window.onload = function () {
            for (var i = 0; i < check.length; i++) {
                check[i].onclick = chkclick;
            }
        }

        function chkclick() {
            var checkList = "";
            for (var i = 0; i < check.length; i++) {
                if (check[i].checked) {
                    checkList = checkList + check[i].value + ",";
                }
            }
            document.getElementById("HiddenField1").value = checkList.substring(0, checkList.length - 1);
        }

        function checkAll() {
            var checkList = "";
            var chk = document.getElementById("Checkbox11");
            if (chk.checked) {
                for (var i = 0; i < check.length; i++) {
                    check[i].checked = true;
                    checkList = checkList + check[i].value + ",";
                }
                document.getElementById("HiddenField1").value = checkList.substring(0, checkList.length - 1);
            }
            else {
                for (var i = 0; i < check.length; i++) {
                    check[i].checked = false;
                    document.getElementById("HiddenField1").value = "";
                }
            }
        }
        function addCategory_Win() {
            window.showModalDialog('/AddCategory.aspx', '', '');
            window.location.reload();
        }

        function deleteCategory() {
            var chckBox = document.getElementsByName("Checkbox1");
            var num = chckBox.length;
            var i = "";
            for (var index = 0; index < num; index++) {
                if (chckBox[index].checked) {
                    i++;
                }
            }
            if (i > 1) {
                alert("只能选择一条数据");
            }
            else if (i < 1) {
                alert("请选择一条数据");
            }
            else {
                if (window.confirm("数据删除无法恢复，是否删除？")) {
                    var categoryId = $("#HiddenField1").val();
                    $.ajax({
                        url: "../AjaxHandler/DeleteCategory.ashx",
                        type: "post",
                        data: {
                            "CategoryId": categoryId
                        },
                        success: function (data) {
                            if (data > 0) {
                                alert("删除成功！");
                                window.location.reload();
                            }
                            else {
                                alert("删除失败！");
                            }
                        }
                    });
                }
            }
        }

        function addTable() {
            var div = document.getElementById("createTable");
            var table = "";
            table += "<table>";
            table += "<tr><td>类目编号：</td><td><input id=\"categoryId\" type=\"text\" /></td></tr>";
            table += "<tr><td>类目名称：</td><td><input id=\"categroyName\" type=\"text\" /></td></tr>";
            table += "</table>";
            div.innerHTML = table;
            //div.innerHTML = "<tr><td>类目编号：</td><td><input id=\"categoryId\" type=\"text\" /></td></tr>";
        }


    </script>
</head>
<body>
    <form runat="server">
        <asp:HiddenField ID="HiddenField1" runat="server" />
        <input id="AddCategory" type="button" value="添加类目" onclick="addCategory_Win();" />
        <input id="CreateTable" type="button" value="创建表格" onclick="addTable();" />
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Font-Size="12px" OnRowCommand="GridView1_RowCommand" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField HeaderText="全选/取消">
                    <HeaderTemplate>
                        <input id="Checkbox11" type="checkbox" onclick="checkAll()" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input name="Checkbox1" type="checkbox" value='<%# Eval("categoryid") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="类目编号">
                    <ItemTemplate>
                        <asp:Label ID="Label1" runat="server" Text='<%# Eval("categoryid") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="类目名称">
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Eval("categoryname") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <HeaderTemplate>操 作</HeaderTemplate>
                    <ItemTemplate>
                        <a href="DetailCategoryInfo.aspx?CategoryId=<%# Eval("categoryid") %>">查看</a>
                        <%--                        <asp:LinkButton ID="btnDelete" runat="server" Text="删除" CommandName="DeleteCategoryById" CommandArgument='<%# Eval("categoryid") %>' OnClientClick="return confirm('删除后无法恢复，是否删除？');"></asp:LinkButton>--%>
                        <a href="#" onclick="deleteCategory();">删除</a>
                        <a href="UpdateCategoryInfo.aspx?CategoryId=<%# Eval("categoryid") %>">修改</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </form>
        <div id="createTable">
        </div>
</body>
</html>

我是这么写的，在页面点击按钮后，还是没有反应？！

支持(0) 反对(0) 风吹裤裆JJ凉 | 园豆：202 (菜鸟二级) | 2014-02-23 12:57
0

他     M    D  笔！！！    这是  gou    P的文章   害死 劳资！！！！！！！！！！！！！！      今天非得留言  省的祸害别人。

dddssaa | 园豆：202 (菜鸟二级) | 2017-06-20 17:31
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。