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

Question

I'm trying to append html code via Jquery ajax. 我正在尝试通过Jquery ajax附加html代码。

I have a html form (jQuery mobile) and send data to PHP file when hitting submit button via JQuery Ajax. 我有一个html表单（jQuery mobile），并在通过JQuery Ajax按下Submit按钮时将数据发送到PHP文件。

PHP file, send back JSON data like this: PHP文件，像这样发送回JSON数据：

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

I want to create a table on "your-table" div, that includes the JSON data. 我想在“您的表” div上创建一个表，其中包含JSON数据。 This is my code: 这是我的代码：

<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>

The script it's alerting right, but the table its not created. 它警告的脚本正确，但是未创建表。 I tried something easier like to add just a paragraph but neither works. 我尝试了一些简单的操作，例如仅添加一个段落，但均无济于事。

Any help it's appreciated. 任何帮助，不胜感激。

Answer 1

jQuery expects argument for append to be whole DOM element. jQuery期望append参数是整个DOM元素。 Not just a part of it. 不只是一部分。

For example: <table> is missing close tag. 例如： <table>缺少结束标记。 Same with <tr> , and also it is being appended to $('#your-table') (not inside table, but next to it as sibling element), but you would want it to be appended to $('#your-table table') . 与<tr>相同，并且也将其附加到$('#your-table') （不在表格内，但在其旁边作为同级元素），但是您希望将其附加到$('#your-table table') 。

Easiest way for you to make it work would be prepare whole table HTML structure and append it one go. 使它起作用的最简单方法是准备整个表的HTML结构并将其一次性添加。 Like this: 像这样：

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-10-21 11:28:56

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-10-21 11:28:56

解决方案1
0 已采纳 2014-10-21 11:28:56