2015-08-28 125 views
0

我有一個HTML表,其中包含使用PHP生成的行並使用MySQL數據填充。我希望行是可點擊的,在onclick中,他們用該行的MySQL數據打開一個新窗口。發佈到PHP彈出窗口的可點擊的HTML錶行

我可以使用什麼方法在點擊後發佈值並在新窗口中打開PHP頁面而不會影響父頁面? 我行產生與此類似:

while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 
    echo " 
     <tr onclick=\"openDetails(" . $row['id'] . ")\"> //openDetails() does nothing for now… 
     <td>" . $row['id'] . "</td> 
     <td>" . $row['ser'] . "</td> 
     <td>" . $row['part'] . "</td> 
     <td>" . $row['model'] . "</td> 
     <td>" . $row['make'] . "</td> 
     <td>" . $row['description'] . "</td> 
     <td>" . $row['price'] . "</td> 
    </tr>"; 

openDetails();什麼也不做,但我認爲JS(我願意JQuery的解決方案)是關鍵。總體思路是,有人點擊該行,然後他們可以在新窗口中獲得assets_details.php(將查詢WHERE id=$_POST['id']並填寫表單),以便他們編輯和提交信息。如果POST不可能,$_SESSION變量會這樣做,我只是不知道如何設置「onclick」。

回答

0

感謝@RamRaider的建議,但我什麼都不知道阿賈克斯的,我害怕使用代碼,我不完全理解。

雖然我想出了這個解決方案。我將表格封裝在表單中,並創建了一個隱藏的輸入,該輸入已針對該行設置並提交了onclick。

<form target='_blank' name='getID' method='POST' action='asset_details.php'> 
<input type='hidden' name='id' id='id'> 
<table> 
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) { 
    echo " 
     <tr onclick=\"selectID('" . $row['id'] . "')\"> 
      <td>" . $row['id'] . "</td> 
      <td>" . $row['ser'] . "</td> 
      <td>" . $row['part'] . "</td> 
      <td>" . $row['model'] . "</td> 
      <td>" . $row['make'] . "</td> 
      <td>" . $row['description'] . "</td> 
      <td>" . $row['price'] . "</td> 
     </tr> 
</table> 
</form>"; 

的JS:

function selectID(id) { 
    document.getID.id.value = $(this).closest('tr').attr('id'); 
    document.getElementsByName('getID')[0].submit(); 
} 
0

通常用於調用與JavaScript參數的方法,該參數應該是在引號中,

變化

<tr onclick=\"openDetails(" . $row['id'] . ")\"> 

<tr onclick=\"openDetails('" . $row['id'] . "')\"> 
+0

即便如此,我也沒有()函數定義的openDetails。我不知道如何使用JS將數據發佈到新窗口。 – howdoisysadmin

+0

如果參數是一個整數或某種類型的對象,則不需要引號 - 儘管它是必需的。 – RamRaider

0

通常人們不使用內聯函數,但是使用諸如document.querySelectorAll之類的方法爲所有行註冊函數,該方法可以從對象/元素的屬性獲取標識。然後,您的函數(openDetails)將通過ajax發佈到您的後端腳本,該腳本可以在以任何您喜歡的格式返回響應之前執行所需的任何處理。

一些僞代碼來顯示您將採取的流程。你如何處理數據取決於你 - 你可以在屏幕上彈出一個對話框(例如:lightbox樣式),在某處添加一條消息,添加一個新的表格行等等。請注意,ajax函數剛剛寫在這裏,以顯示這個想法,我可以做任何保證,它將所有的工作「是」

html/php 
-------- 
I would include the id in a dataset value like this so that the javascript can get the value when the tr is clicked. 
<tr data-id='".$row['id']."'> 


javascript 
---------- 
function initialise(){ 
    /* find all table rows and assign a listener function */ 
    var col=document.querySelectorAll('tr'); 
    for(var n in col) if(n && col[n] && col[n].nodeType==1){ 
     col[n].addEventListener('click',openDetails,false); 
    } 
} 

function openDetails(event){ 
    /* get the specific id from the table row using it's dataset-id value */ 
    var id=this.dataset.id; 
    /* pseudo ajax method */ 
    ajax.call(this, '/assets_details.php',{ 'callback':opendetails_callback, 'params':{ 'id':id } }); 
} 

function ajax(url,options){ 
    var req=new XMLHttpRequest(); 
    var params=[]; 
    for(var n in options.params) params.push(n+'='+options.params[n]); 

    req.onreadystatechange=function(){ 
     if(req.readyState && req.status==200) { 
      /* invoke callback function with data returned from asset_details.php */ 
      options.callback.call(this, req.response); 
     } 
    } 
    req.open('POST', url, true); 
    req.send(params.join('&')) 
} 

function opendetails_callback(response){ 
    /* You would use the callback to create the new content on screen */ 
    alert(response); 
} 

document.addEventListener('DOMContentLoaded', initialise, false); 

後端腳本將監聽發佈的數據,並作出相應的反應。

assets_details.php 
------------------ 
<?php 
    /* include your functions etc */ 
    if($_SERVER['REQUEST_METHOD']=='POST'){ 

     /* Process your data and send response: example */ 
     echo json_encode($_POST); 
    } 
?>