在JavaScript中访问多维PHP数组

问题描述：

I want to show a jQuery dialog with details of one row in the table (that only shows part of information). This is an example of what I want to do.

The problem: When the image of 'View more details' of a row is clicked, the JS function receives the id of the row clicked. I can't assign to JS variable 'data' as I did in the HTML part of the code. How can I solve this? Is a good way to do it?

<script>
    $(function() {    
        $( "#dialog" ).dialog({
            autoOpen: false,
            height: 400,
            width: 600,
            buttons: [{
                text: "Close",
                click: function() {
                    $(this).dialog("close");
                }
            }]
        });

        $(".details").click(function(){
            $("#dialog").empty();
            var i = $(this).attr('id');
            var data = <?=$cars[i]['price']?>;
            $("#dialog").append("<p>Car:"+data+"</p>");
            $("#dialog").dialog("open");
        });
    });
</script>

<table>
    <?php for($i = 0; $i < count($cars); $i++) { ?>
        <tr>
            <td><?=$cars[$i]['model']?></td>
            <td><?=$cars[$i]['colour']?></td>
            <td> 
                <img class="details" id="<?=$i?>" style="cursor: pointer;" src="http://localhost/ci/public/images/details.png" width="40" height="40" alt="Details"/>
            </td>
        </tr>
    <?php } ?>
</table>

答

You're trying to use data that is on the server on the client without any code to send it to the client. You have to have a way to get the data from php to javascript. Here is one alternative, which uses HTML data attributes.

In your image tag do this:

 <img class="details" id="<?=$i?>" data-price="<?=htmlentities($cars[$i]['price'])?>" style="cursor: pointer;" src="http://localhost/ci/public/images/details.png" width="40" height="40" alt="Details"/>

This just saves some data in a form that the client can read easily. htmlentities is there just for safety in case the variable contains quote characters (intentionally or not)

I should point out that there is no explicit need for the id attribute at this point unless you are using it for something else.

Then you can change your click function to the following (from the top of my head, not tested, consult the documentation for .data()):

$(".details").click(function(){
        $("#dialog").empty();
        var data = $(this).data('price');
        $("#dialog").append("<p>Car:"+data+"</p>");
        $("#dialog").dialog("open");
    });

答

There are many way to achieve this few are:

1) If the data is dynamic then uses Ajax

2) If static then any of the below can be used -

a) Store php array info js array and retrieve it using Key by making the array key as row id and fetch data from array on onClick of the row.
b) If you want to avoid arrays then -
- i) Create unique div with info that need to be displayed for every row. Default hide it on click unhide it and show it as dialog.
- ii) Create a js function with an argument and enable dialog in it with the information passed to it as an argument. For every row call this function on onClick event by passing the info as an argument.

在JavaScript中访问多维PHP数组

相关推荐