POST到PHP弹出窗口的可点击的HTML表行 - Clickable HTML table rows that POST to a PHP popup window

我有一个HTML表，其中有用PHP生成并填充MySQL数据的行。我希望行是可点击的，其中onclick他们打开一个新的窗口与MySQL数据的行。

我可以使用什么方法来POST一个值在点击和打开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"。

感谢@RamRaider的建议，但我对ajax一无所知，我害怕使用我不完全理解的代码。

我想出了这个解决方案。我将表包装在一个表单中，并创建了一个隐藏的输入，为该行设置并在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();
}

通常在javascript中调用带参数的方法时，参数应该用引号括起来，

改变

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

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

通常不会使用内联函数，而是使用document.querySelectorAll等方法为所有行注册该函数，该方法可以从TR对象/元素上的属性获取id。然后，您的函数(openDetails)将通过ajax发布到您的后端脚本，该脚本将在以您喜欢的任何格式返回响应之前执行任何处理。

一些伪代码来显示您将采用的流程。你如何处理数据，然后由你-你可以弹出一个对话框在屏幕上(即:灯箱风格)，闪光的消息在某处，添加一个新的表行等请注意，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 );

后端脚本将监听post数据并做出相应的响应。

assets_details.php
------------------
<?php
    /* include your functions etc */
    if( $_SERVER['REQUEST_METHOD']=='POST' ){ 
        /* Process your data and send response: example */
        echo json_encode( $_POST ); 
    }
?>