如何通过ajax追加表体

时间:2017-06-08 09:58:08

标签: javascript php ajax

我想将表的tbody附加到已经存在的表中我如何追加表。实际上我想从整个表中搜索单词.BY javascript和ajax。如何在search.php页面中附加表tbody ,请告诉我这个。  的search.php

   <div >
      <table id="table">
        <thead>
        <th>
        Email
        </th>
        <th>
        Firstname
        </th>
        <th>
        Lastname
        </th>
        <th>
        Companyname
        </th>
        <th>
        Title
        </th>
        <th>
        LinkedinURL
        </th>
        <th>
        Domain
        </th>
        <th>
        Companylocation
        </th>
        <th>
        Companysizecategory
        </th>
        <th>
       Companyfunding
        </th>
        <th>
        Companyindustry
        </th>
        <th>
        Companywebtech
        </th>
        <th>
        DateDownloaded
        </th>
        <th>
        ElucifyAccountID
        </th>
        </thead>


      </table>
      </div>
    </form>
      </div>
    </form>
      </body>
    </html>
    <script>
    $("#search").keyup(function()
    {
     var search=$(this).val();
     $.ajax({
         type:"POST",
         url:"searchajax.php",
         data:{
          ajaxsearch:search,
         },
         success:function(data){

          alert("success");
         },
         error:function(){
          alert('error');
         }

     });
    });
    </script>

ajax.php

if (!empty($_POST['ajaxsearch'])) 
{
       $search=$_POST['ajaxsearch'];
$sql="SELECT * from company";
$sql_query=mysql_query($sql);
$logicStr="WHERE ";
$count=mysql_num_fields($sql_query);
for($i=0 ; $i < mysql_num_fields($sql_query) ; $i++){
 if($i == ($count-1) )
$logicStr=$logicStr."".mysql_field_name($sql_query,$i)." LIKE '%".$search."%' ";
else
$logicStr=$logicStr."".mysql_field_name($sql_query,$i)." LIKE '%".$search."%' OR ";
}

$sql="SELECT * from company ".$logicStr;
//echo "SELECT * from company ".$logicStr;
$get=mysql_query($sql);

$i=0;
while($getresult=mysql_fetch_array($get))
  {

    echo '<tbody>';
    echo'<tr>';
    echo '<td>';
     echo $getresult['Email'];
    echo '</td>';
    echo'<td>';
     echo $getresult['Firstname'];
    echo '</td>';
    echo '<td>';
     echo $getresult['Lastname'];
    echo '</td>';
    echo'<td>';
     echo $getresult['Companyname'];
     echo '</td>';
    echo'<td>';
    echo $getresult['Title'];
    echo'</td>';
    echo'<td>';
     echo $getresult['LinkedinURL'];
     echo'</td>';
    echo '<td>';
     echo $getresult['Domain'];
     echo'</td>';
    echo'<td>';
     echo $getresult['CompanyLocation'];
     echo '</td>';
    echo '<td>';
     echo $getresult['Companysizecategory'];
     echo '</td>';
    echo '<td>';
     echo $getresult['Companyfunding']
     echo'</td>';
   echo'<td>';
    echo $getresult['Companyindustry'];
    echo '</td>';
    echo '<td>';
     echo $getresult['companywebtech'];
     echo'</td>';
    echo '<td>';
    echo $getresult['Datedownloaded'];
    echo'</td>';
    echo '<td>';
     echo $getresult['ElucifyAccountID'];
     echo'</td>';
     echo'</tr>';
     echo'</tbody>';


   $i++;
   }
   } 
   else
   {
    echo'<script>window.alert("enter valid Data")</script>';
   }
 ?>

2 个答案:

答案 0 :(得分:2)

尝试以下代码:

$.ajax({
    type:"POST",
    url:"searchajax.php",
    data:{
        ajaxsearch:search,
    },
    success:function(data){
        $('#table thead').insertAfter(data);
    },
    error:function(){
        alert('error');
    }
});

答案 1 :(得分:0)

ajax.php,您已打印<tbody>。因此,如果您想将ajax <tbody>附加到现有search.php,请尝试这样:

$.ajax({
    type:"POST",
    url:"searchajax.php",
    data:{ajaxsearch:search},
    success:function(data){
        $('#table tbody').append(data);
    },
    error:function(){
        alert('error');
    }
});
  

注意:如果您使用append,则在追加之前不会删除现有行   新数据。这可能会导致重复的行。

如果您不需要重复的行,则可以在追加之前删除或清空<tbody>,如下所示。

$.ajax({
        type:"POST",
        url:"searchajax.php",
        data:{ajaxsearch:search},
        success:function(data){
            $('#table tbody').empty();
            $('#table tbody').append(data);
        },
        error:function(){
            alert('error');
        }
    });