Question

我开发了一个表，该表在加载时使用PHP和mysql动态生成其行。现在，我真正想要的是单击按钮后仅使用Jquery刷新tbody元素。我已经在CAPITAL中写了评论。这是按钮的代码：

 $('#confirm').click(function() {

                            var application = $('#discSwList').val();

                                            $.ajax({
                                                type:'POST',
                                                url:'utility.php',
                                                data: {  unlockFlag: 1, appName: application, arrayCompSw: JSON.stringify(containerList)},
                                                success : function() {
                                                    alert('Everything is fine');
// IN THE FOLLOWING STATEMENT I WOULD LIKE TO RELOAD ONLY THE tbody called "compSwDiscoveredList" 
                                                    $('#compSwDiscoveredList').load('') ?????
                                                },
                                                error: function(err) {
                                                    alert(err);
                                                }
                                            });
                                        });

                                    });

html表：

<table id="tableCompSwDiscoveredList" cellspacing="4" cellpadding="4">
                                    <thead>
                                        <th>Disassocia</th>
                                        <th>ID SW CONFIG</th>
                                        <th>ID SOFTWARE</th>
                                        <th>SO</th>
                                        <th>ID CONFIG</th>
                                        <th>NOME APPARATO</th>
                                        <th>IP ADDRESS</th>
                                    </thead>
                                    <tbody id="compSwDiscoveredList">
                                    </tbody>
                                </table>
                            </div>

Answer 1

$('#compSwDiscoveredList').load('asset_discSoftwList.php ' + #compSwDiscoveredList + " > * ", function () {
// something
});

这将调用PHP文件，该文件会生成您的动态内容并将其插入div。

希望这会有所帮助。

Answer 2

要从json填充html内容，可以使用jquery模板库。我已经通过jquery模板代码更改了您的功能

    $('#confirm').click(function() {

                            var application = $('#discSwList').val();

                                            $.ajax({
                                                type:'POST',
                                                url:'utility.php',
                                                data: {  unlockFlag: 1, appName: application, arrayCompSw: JSON.stringify(containerList)},
                                                success : function(jsonData) {
                                                    alert('Everything is fine');
// Below "compSwDiscoveredList" 
                                                     $("#tableTemplate").tmpl(jsonData).appendTo("#tableCompSwDiscoveredList");
                                                },
                                                error: function(err) {
                                                    alert(err);
                                                }
                                            });
                                        });

                                    });

var jsonData = [
							{ Disassocia: "Disassocia1", IdSwConfig: "IdSwConfig1" ,IdSoftware : "IdSoftware1" ,So:'So1' ,IdConfig:'IdConfig1',NomeApparato:'Nome Apparato1',IpAddress:'Ip Address1'},
							{ Disassocia: "Disassocia2", IdSwConfig: "IdSwConfig2" ,IdSoftware : "IdSoftware2" ,So:'So2' ,IdConfig:'IdConfig2',NomeApparato:'Nome Apparato2',IpAddress:'Ip Address2'},
							{ Disassocia: "Disassocia3", IdSwConfig: "IdSwConfig3" ,IdSoftware : "IdSoftware3" ,So:'So3' ,IdConfig:'IdConfig3',NomeApparato:'Nome Apparato3',IpAddress:'Ip Address3'},
							{ Disassocia: "Disassocia4", IdSwConfig: "IdSwConfig4" ,IdSoftware : "IdSoftware4" ,So:'So4' ,IdConfig:'IdConfig4',NomeApparato:'Nome Apparato4',IpAddress:'Ip Address4'} 
							];
              
              $("#tableTemplate").tmpl(jsonData).appendTo("#tableCompSwDiscoveredList");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script id="tableTemplate" type="text/x-jquery-tmpl">
        <tr>
			<td>${Disassocia}</td>
			<td>${IdSwConfig}</td>
			<td>${IdSoftware}</td>
			<td>${So}</td>
			<td>${IdConfig}</td>
			<td>${NomeApparato}</td>
			<td>${IpAddress}</td>
        </tr>
    </script>
<table id="tableCompSwDiscoveredList" cellspacing="4" cellpadding="4">
                                    <thead>
                                        <th>Disassocia</th>
                                        <th>ID SW CONFIG</th>
                                        <th>ID SOFTWARE</th>
                                        <th>SO</th>
                                        <th>ID CONFIG</th>
                                        <th>NOME APPARATO</th>
                                        <th>IP ADDRESS</th>
                                    </thead>
                                    <tbody id="compSwDiscoveredList">
                                    </tbody>
                                </table>
                            </div>

用jQuery重新加载内容表

2 个答案: