通过 jQuery 将表格附加到 html 中的 div 的代码 - jQuery mobile答案

【问题标题】：Code to append table into div in html via jQuery - jQuery mobile通过 jQuery 将表格附加到 html 中的 div 的代码 - jQuery mobile
【发布时间】：2014-10-21 10:24:13
【问题描述】：

我正在尝试通过 Jquery ajax 附加 html 代码。

我有一个 html 表单（jQuery mobile）并在通过 JQuery Ajax 点击提交按钮时将数据发送到 PHP 文件。

PHP 文件，返回 JSON 数据如下：

{"employee":[{"Name":"Mario","Surname":"K","ID":"234"}, {"Name":"Helen","Surname":"Smith","ID":"546"]}

我想在“your-table”div 上创建一个包含 JSON 数据的表。这是我的代码：

<script>
 $(document).ready(function(){
  $("#addSubmit").click(function(){
      var postData = $("#addForm").serialize();
      var action = "add";
      $.ajax({
            type:'post',
            url:"http://10.0.2.2/phpAndAjax/index-handler.php",
            crossDomain : true,
            data: {postData: postData, action: action},
            success: function() {

                var action = "show";
                 $.ajax({
                    type:'post',
                    url:"http://10.0.2.2/phpAndAjax/index-handler.php",
                    crossDomain : true,
                    dataType: 'json',
                    data: {action: action},
                    success: function(data) {
                        alert(JSON.stringify(data));

                        $('#your-table').append('<table>');
                        $('#your-table').append('<tr>');
                            $('#your-table').append('<th> Name </th>');
                            $('#your-table').append('<th> Surname </th>');
                            $('#your-table').append('<th> ID </th>');
                            $('#your-table').append('<th> E-mail </th>');
                        $('#your-table').append('</tr>');

                              $.each(data, function(i, item) {

                                    var Name=item.name;
                                    $('#your-table').append('<tr>');
                                    $('#your-table').append('<th>'+Name+'</th>');
                                    $('#your-table').append('</tr>');

                              });
                            $('#your-table').append('</table>');
                            }
                     });
                }
          });
      });
 });
</script>

</head>
<body>


                    <!--Main page -->
<div data-role="page" id="main" >
    <div data-role="header">
        <h1>Employee management system</h1>
    </div>

    <div data-role="main" class="ui-content">
        <br>
        <form id="select_form" method="POST">
            <p>
                <label id="action">Please, select one of the following</label> <br>
                <br> 
                <a href="#searchEmployee" data-role="button">Search an employee 
                    (Edit and Delete)</a> 
                <a href="#addEmployee" data-role="button">Add Employee</a>
            </p>
        </form>
        <div id="your-table"></div>
    </div>
</div>


<!-- Add employee page -->
<div data-role="page" id="addEmployee">
    <div data-role="header">
        <h2>Add an employee</h2>
    </div>

    <div data-role="main" class="ui-content">
        <form id="addForm" method="post">
            <p>
                <label for="name">Firstname</label> 
                <input id="name" name="name" type="text" class="required" /> <br>
            </p>

            <p>
                <label for="surname">Lastname</label> <input id="surname"
                    name="surname" type="text" class="required" /> <br>
            </p>

            <p>
                <label for="id">ID</label> 
                <input id="id" name="id" type="text" class="required"  /> <br>
            </p>

            <p>
                <input type="submit" name="submit" id="addSubmit" value="Add employee"> 
            </p>
        </form>
    </div>
</div>

它警告的脚本正确，但未创建表。我尝试了一些更简单的方法，比如只添加一个段落，但都不起作用。

感谢任何帮助。

【问题讨论】：

标签： jquery html ajax jquery-mobile html-table

【解决方案1】：

jQuery 期望 append 的参数是整个 DOM 元素。不仅仅是它的一部分。

例如：<table> 缺少结束标记。与<tr> 相同，它也被附加到$('#your-table')（不在表内，而是作为兄弟元素旁边），但您希望它被附加到$('#your-table table')。

让它工作的最简单方法是准备整个表格 HTML 结构并一次性附加它。像这样：

var tableHtml = '<table>';
tableHtml += '<tr>';
tableHtml += '<th> Name </th>';
tableHtml += '<th> Surname </th>';
tableHtml += '<th> ID </th>';
...
tableHtml += '</table>';
$('#your-table').append(tableHtml);

【讨论】：

我需要添加任何特定的 jquery 库吗？因为我试过了，但没有任何反应。
如果你说你的alert() 可以工作，那么你已经需要jQuery 库了。（因为 Ajax 调用槽 jQuery.ajax() 是成功的）尝试将 $('#your-table').append("<table><tr><td>It works!</td></tr></table>"); 放在您的 alert() 之后。如果可行，请尝试查看在 tableHtml 中生成的 HTML 内容并确保其有效。
还是不行。触发jquery ajax 的#addSubmit 按钮不在#main 中（我想在其中显示表格）。它在页面#addEmployee 中。这会导致任何问题吗？我现在在html中添加了代码。
我是对的...问题不在于表格的代码，而在于#main page load...