Question

我有一个HTML表，其中包含使用PHP生成的行并填充了MySQL数据。我希望这些行可以点击，在那里点击它们打开一个新窗口，其中包含该行的MySQL数据。

我可以使用什么方法在点击时发布值并在新窗口中打开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变量不可行，我就不知道如何设置＆＃34; onclick＆＃34;。

Answer 1

通常在javascript中使用参数调用方法时，参数应该在引号中，

变化

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

到

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

Answer 2

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

一些伪代码，用于显示您将采用的流程。你如何处理数据取决于你 - 你可以在屏幕上弹出一个对话框（例如：灯箱样式），在某处闪烁一条消息，添加一个新的表格行等请注意，这里写的ajax函数刚才显示这个想法，我不能保证它一切都会正常工作＆＃39;

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 );

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

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

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

Answer 3

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

我想出了这个解决方案。我将表格包装在一个表格中，并创建了一个隐藏的输入，该输入被设置并提交为该行的单击。

<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();
}

POST到PHP弹出窗口

3 个答案: