用JQuery重新載入表格

Question

我有以下問題。這是我的index.php：

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">A projects</a></li> 
     <li><a href="#tabs-2">B projects</a></li> 
    </ul> 
    <div id="tabs-1"> 
     <?php echo loadTabs(1);?> 
    </div> 
    <div id="tabs-2"> 
     <?php echo loadTabs(2);?> 
    </div> 

這裏是我的兩個PHP函數建立的表：

function loadTabs($settingId){ 
$query = 'select * from deployments_settings where id="'.$settingId.'"'; 
$result = mysql_query($query); 
$html = '<div id="tab'.$settingId.'_container">'; 
    while ($row = mysql_fetch_array($result)) { 
     $html .= '<div id="tab'.$settingId.'_buttons">'; 
     $html .= '<button id="add_project">'.$row['addbuttoncaption'].'</button>'; 
     $html .= '</div>';// id="tab[1..2]_button_add" 
     $html .= '<div id="tab'.$settingId.'_content">'; 
     $html .= '<br/>'; 
     $html .= loadTables($settingId, $row['deploymentstable']); 
     $html .= '</div>';//id=tab[1..2]_[first..second]content 
    }//while   
$html .= '</div>';// id="tab[1..2]_container" 
return $html;} 

function loadTables($tableId, $tableName) { 
$query = 'select * from '.$tableName.' order by `id` desc'; 
$result = mysql_query($query); 
$html = '<table id="tab'.$tableId.'_table" class="tabTable">'; 
$html .= '<thead><tr>'; 
$html .= '<th>#</th>'; 
$html .= '<th>Project number</th>'; 
$html .= '<th>Deadline</th>'; 
$html .= '<th>Assign to</th>'; 
$html .= '<th>Description</th>'; 
$html .= '<th>Action</th>'; 
$html .= '</tr></thead>'; 
$html .= '<tbody>'; 
    $countRow = 0; 
    while ($row = mysql_fetch_array($result)) { 
     $html .='<tr>'; 
     $html .= '<td class="colID">'.++$countRow.'</td><td class="colPN">'.$row['name'].'</td><td class="colDL">'.$row['deadline'].'</td><td class="colAT">'.$row['assignto'].'</td><td>'.$row['description'].'</td>'; 
     $html .= '<td class="colACT">'; 
     $html .= '<button id="edit_action">Edit</button>'; 
     $html .= '<button title="Remove" contentReload="'.$tableId.'" rrTable="'.$tableName.'" rrID="'.$row['id'].'" id="delete_action">Delete</button>'; 
     $html .= '</td>'; 
     $html .= '</tr>'; 
     }//while 
$html .= '</tbody>'; 
$html .= '</table>'; 
return $html;} 

這裏是我的JQuery的一部分。按鈕刪除。

$("button#delete_action") 
    .button({icons: {primary: "ui-icon-circle-minus"}, text: false}) 
    .click(function() { 
     var contentReload = $(this).attr("contentReload"); 
     //alert(contentReload); 
     if(confirm("Press OK to confirm DELETE operation")) { 
      $.post("coreDB.php", { 
        action: 3, 
        rrTable: $(this).attr("rrTable"), 
        rrID: $(this).attr("rrID"), 
        contentReload: $(this).attr("contentReload") 
       }, 
       function(data, textStatus, XMLHttpRequest) { 
        //alert(data); 
        $("#tab"+ contentReload + "_table").html(data); 
       }); //post 
     } //if then condition 
}); 

的問題是這樣的 - >當「刪除鍵」成功運行，它給回表的輸出，我重新申請表對象$("#tab"+ contentReload + "_table").html(data);。但不幸的是，它不會重新載入表格，JQuery中的所有好東西都不起作用。

是什麼我需要在jQuery端工作，以重新加載表。

預先感謝您！

Answer 1

我還沒有真正閱讀過上面的代碼，因爲它很難閱讀，但如果你想從表中刪除行，我會將AJAX調用發送到你的刪除腳本。然後，如果AJAX調用返回true，只需使用JavaScript從表中刪除該行。這意味着您的頁面不必刷新。

Answer 2

這個問題不是很清楚，你是什麼意思，「它不重新加載表」？

重新加載後，按鈕不會起作用：單擊只能將事件附加到頁面中的元素。 由於你刪除，然後創建新的按鈕，沒有點擊他們....

您需要重新應用上面的這些新按鈕上的$（「button＃delete_action」）。按鈕...）或你可以使用實況（）： http://api.jquery.com/live/

在您的例子：

<script type="text/javascript"> 
function makeButtons() 
{ 
    $("button#delete_action") 
     .button({icons: {primary: "ui-icon-circle-minus"}, text: false}); 
} 
$(document).ready(function() 
{ 
    $("button#delete_action").live('click',function() { 
    var contentReload = $(this).attr("contentReload"); 
    //alert(contentReload); 
    if(confirm("Press OK to confirm DELETE operation")) { 
     $.post("coreDB.php", { 
       action: 3, 
       rrTable: $(this).attr("rrTable"), 
       rrID: $(this).attr("rrID"), 
       contentReload: $(this).attr("contentReload") 
      }, 
      function(data, textStatus, XMLHttpRequest) { 
       //alert(data); 
       $("#tab"+ contentReload + "_table").html(data); 
       makeButtons(); 
      }); //post 
    } //if then condition 

}）; }

每次都爲活動但重繪接口分配點擊一次。只需將makeButtons應用於「#tab」+ contentReload +「_table」中的按鈕，即可通過將此選擇器作爲參數傳遞給makeButtons來優化它。