Question

我正试图通过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>

它正在提醒的脚本，但是没有创建表。我尝试了一些更简单的方法，只添加一个段落，但都不起作用。

任何帮助都值得赞赏。

Answer 1

jQuery期望append的参数是完整的DOM元素。不只是其中的一部分。

例如：<table>缺少关闭标记。与<tr>相同，并且它也被附加到$('#your-table')（不在表格内，但在它旁边作为兄弟元素），但您希望将其附加到$('#your-table table')。< / p>

让它工作的最简单方法是准备整个表格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将表附加到html中的div的代码 - jQuery mobile

1 个答案: