2014-11-02 3 views
-2

테이블의 한 행에 대한 세부 정보가있는 jQuery 대화 상자 (정보의 일부분 만 표시)를 보여주고 싶습니다. 이것은 내가하고 싶은 일의 예입니다.JavaScript로 다차원 PHP 배열에 액세스하기

문제 : 행의 '자세히보기'이미지를 클릭하면 JS 함수가 클릭 한 행의 ID를받습니다. JS의 변수 'data'에 코드의 HTML 부분에서했던 것처럼 할당 할 수 없습니다. 이 문제를 어떻게 해결할 수 있습니까? 그것을 할 수있는 좋은 방법입니까?

<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> 
+0

무엇을해야할까요? –

+0

당신이하려고하는 것이 무엇인지에 따라, 당신이하려고하는 것이 가장 쉬운 방법은 PHP 측면에서 여러분의'img' 태그에 데이터 속성을 추가하는 것입니다. 귀하의 클릭 핸들러는 jquery의'data' 메소드 호출로 읽을 수 있습니다. –

+0

@TimSeguine http://aspsnippets.com/demos/671/과 비슷한 것을하고 싶지만 테이블에 표시되지 않은 일부 데이터가 있습니다. – David

답변

0

코드를 사용하지 않고 클라이언트의 서버에있는 데이터를 클라이언트로 보내려고합니다. 당신은 PHP에서 자바 스크립트로 데이터를 얻을 수있는 방법이 있어야합니다. 다음은 HTML 데이터 속성을 사용하는 하나의 대안입니다. 이미지 태그에서

이 작업을 수행 :

<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"/> 

이 단지 클라이언트가 쉽게 읽을 수있는 형태로 일부 데이터를 저장합니다. htmlentities 변수에 인용 부호가 포함 된 경우 (의도적이든 아니든)에 안전을 위해서입니다.

다른 용도로 사용하지 않는 한이 시점에서 id 속성이 명시 적으로 필요하지 않다는 점을 지적해야합니다.

그런 다음 당신이 다음 (내 머리, 테스트하지의 상단에서, .data()에 대한 설명서 참조)을에 클릭 기능을 변경할 수 있습니다

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

마지막으로이 솔루션이 작동합니다. 나는 자동차 배열에 보여주고 싶은 모든 데이터를 가지고 있기 때문에 htmlentities가 필요하지 않습니다. Tim에게 감사드립니다! – David

+0

나는 이것이 왜 떨어 졌는지 이해하지 못한다. –

1

이 몇을 달성하기 위해 많은 방법이있다 같습니다

1) 데이터가 동적 인 경우는 그 아래 사용될 수있는 임의의 다음 Ajax를

2)를 사용하는 경우 정적 -

  • a) php 배열 정보 js 배열을 저장하고 키를 사용하여 배열 키를 행 ID로 만들고 배열의 onClick에있는 데이터를 가져옵니다.

  • b)는 당신이 다음 배열을 피하려면 -

    • i)는 모든 행에 대해 표시해야 할 정보와 고유의 사업부를 만듭니다. 기본 클릭으로 숨김을 숨기고 대화 상자로 표시합니다.
    • ii) 인수를 사용하여 js 함수를 만들고 전달 된 정보를 인수로 사용하여 대화 상자를 활성화하십시오. 모든 행에 대해이 함수는 인수로 정보를 전달하여 onClick 이벤트에서이 함수를 호출합니다.
관련 문제