傳遞參數到jquery點擊

Question

我有一個動態的html表格，使用PHP從數據庫中創建。它看起來是這樣的：

<table id="webcam-table">    
<thead>     
    <tr>      
     <th>Camera <br>Type</th>      
     <th>Name</th>      
     <th>Quality</th>      
     <th>Motion <br>Detection</th>      
     <th>Email <br>Notice</th>      
     <th>Camera Actions</th>     
    </tr>    
</thead>         
<tbody>     
    <tr data-hash="6ab000ef7926b4a182f0f864a0d443fc19a29fdd">      
     <td>WEBCAM</td>      
     <td>test</td>      
     <td>HIGH</td>      
     <td>On</td>      
     <td>On</td>      
     <td><button id="editbutton" onClick='edit(this, "/ajax_dash", "WEBCAM", "test29999988877", "0", "6ab000ef7926b4a182f0f864a0d443fc19a29fdd", "0", "0", "1", "", "", "", "")'>Edit</button></td>     
    </tr>         
</tbody>                
<tbody>     
    <tr data-hash="c0fc37512cdcc49b034fefabdc31bb12a3b618da">      
     <td>AXIS</td>      
     <td>mycamera</td>      
     <td>MEDIUM</td>      
     <td>On</td>      
     <td>On</td>      
     <td><button id="editbutton" onClick='edit(this, "/ajax_dash", "AXIS", "myaxiscameraTESb", "1", "c0fc37512cdcc49b034fefabdc31bb12a3b618da", "0", "0", "0", "hhhhhhhhhjjjkk", "ggyykk", "10.0.0.999", "1111")'>Edit</button> 
    </tr>                 
</tbody> 
...       
</table> 

如果單擊編輯按鈕它開闢了已填充這樣你就可以對其進行編輯的所有相機設置形式。我的JavaScript工作正常，只是一個表單。但我想改變這個jQuery對話框。

這是我有：

var js = jQuery.noConflict(); 
js(function() {  

js("#dialog-form").dialog({ 
autoOpen: false, 
height: 300, 
width: 350, 
modal: true, 
buttons: { 
    "Edit camera settings": function() { 
     allFields.removeClass("ui-state-error"); 

    }, 
    Cancel: function() { 
     js(this).dialog("close"); 
    } 
}, 
close: function() { 
    allFields.val("").removeClass("ui-state-error"); 
} 
}); 

js("#editbutton") 
.button() 
.click(function() { 
    js("#dialog-form").dialog("open"); 
}); 
}); 

我有兩個問題：

1. 這將創建在表的第一行的編輯按鈕，我怎麼能將此所有行？ 。

2. 如何開始將參數傳遞到點擊功能，這樣我可以開始在填寫，例如：

   JS（「輸入：文本」）VAL（cameraname）; //雖然我不認爲這是一個好主意，或者我有許多不同的輸入文本字段？

在此先感謝。

Answer 1

你不能有多個具有相同id的html元素（例如：editbutton）。這可能是＃1問題的一部分，而沒有看到更多的代碼。

由於多種原因，我會避免使用內聯事件處理程序（onClick），但主要是因爲現在通常認爲這是不好的做法。更重要的是，如果用戶的連接速度很慢，他們可以在代碼的其他部分準備好之前點擊按鈕。根據edit函數中的代碼，這可能不合需要。相反，您應該使用jQuery的click方法將函數綁定到DOM就緒處的按鈕。

所有這一切，我會根據data-hash值，讓您的按鈕獲取相應的數據（無論是從網頁加載時加載的數組，還是通過$.ajax調用）。然後，您可以將該數據傳遞給表單，然後彈出對話框。

陣列例如

<!-- php generated javascript delivered at page load --> 
<script type="text/javascript"> 
    var table_data = []; 
    <?php 
     foreach($data as $hash => $obj) { 
      // assuming $obj is an array of data 
      echo "data['$hash'] = ["; 
      $hash_strings = array(); 
      foreach($obj as $field => $val) { 
       $hash_strings[] = "'$field' => '$val'"; 
      } 
      echo implode(",\n",$hash_strings)."];\n"; 
     } 
    ?> 

    $(function) { //DOM Ready 

     // Define your dialog, but don't open it yet 
     $("#dialog").dialog({ 
      autoOpen: false 
      // you can also define your other dialog stuff here, like buttons 
      // and what happens when you click on them 
     }); 

     $('#webcam-table button.edit').click(function() { 
      var hash = $(this).closest('tr').attr('data-hash'); 
      for(var i in data[hash]) { 
       $('#dialog form input[name="' + i + '"]').val(data[hash][i]); 
      } 
      $('#dialog').dialog("open"); 
     }); // End of #webcam-table button.edit click 

    }); // End of DOM Ready 

</script> 

阿賈克斯例如

$(function) { //DOM Ready 

    // Define your dialog, but don't open it yet 
    $("#dialog").dialog({ 
     autoOpen: false 
     // you can also define your other dialog stuff here, like buttons 
     // and what happens when you click on them 
    }); 

    $('#webcam-table button.edit').click(function() { 
     $.ajax({ 
      url: "/get-camera-data-by-hash.php", //returns the form data in json format 
      data: "hash=" + $(this).closest('tr').attr('data-hash'), 
      success: function(data){ 
       for(var i in data) { 
        $('#dialog form input[name="' + i + '"]').val(data[i]); 
       } 
       $('#dialog').dialog("open"); 
      } 
     }); 
    }); // End of #webcam-table button.edit click 

}); // End of DOM Ready 

現在，這是未經測試，所以可能有一些語法問題，但希望它應該讓你在正確的軌道上（或至少根據所提供的信息，我認爲這是正確的軌道）。另外，我正在對返回的數據做出一些假設，等等。您應該一直在做一些健康檢查。

對話會是這個樣子：

<div id="dialog"> 
    <form> 
     <input name="field_one" type="text"> 
     <input name="field_two" type="text"> 
     <input name="field_three" type="text"> 
    </form> 
</div>