jquery - HTMLテーブルからJQueryダイアログに値を渡す方法は?

Question

私が必要としているのは次のようなものです: HTML ページにいくつかの行を含むテーブルがあります。各行には、色、品質、場所などのデータが含まれていますが、テーブル内のすべてを非表示にして「詳細」リンクのみを表示したいのですが、リンクをクリックすると、JQuery ダイアログがポップアップしてすべてが表示されます。情報。私は JQuery の初心者なので、JQuery の実装方法に完全に迷っています。オンラインで多くの調査を行いましたが、自分のケースを機能させる方法がまだわかりません。

私のテーブル構造は次のようです：

<div id="room_info" class="datatable_container">
<table id="rooms_table" class="admin_table display">
<thead>
<tr>
<th>Name</th>
<th>Details</th>
</tr>
</thead>

<tbody>
<tr class="even">
<td>
 <div><a href="...">aaa</a></div></td>
<td>
  <div id="dialog-form" name="dialog">
      <button id='create-dialog'>Deatils</button>
      <input type="hidden" name="name" id="name" value="abc"/>
    <input type="hidden" name="email" id="email" value="aaa@mail.com"/>
  </div></td>
</tr>

<tr class="odd">
<td>
 <div><a href="...">bbb</a></div></td>
<td>
  <div id="dialog-form" name="dialog">
      <button id='create-dialog'>Deatils</button>
      <input type="hidden" name="name" id="name" value="cdd"/>
    <input type="hidden" name="email" id="email" value="bbb@mail.com"/>
  </div></td>
</tr>
    </tbody>
    </table>
    </div>
    </div>

そして私のJS関数は次のようになります:

    $(function() {
    var name,email;
    $('#create-dialog').button.click(function(){ 

     name=$(this).find('name').val(); 
     email=$(this).find('email').val();
     $(this).find('dialog-form').dialog("open");
    });

      $(this).find('dialog-form').dialog({
      autoOpen: false,
      height: 300,
      width: 350,
          modal: true});

}); 

JS 関数が奇妙に見えるかもしれませんが、修正と改善にご協力ください。ありがとう！！