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

我有两个问题：

这只会为表格中的第一行创建编辑按钮，如何将其应用于所有行？
如何开始将参数传递给click函数，以便我可以开始填写表单，例如：

JS。（ “输入：文本”）VAL（cameraname）; //虽然我认为这不是一个好主意，因为我有许多不同的输入文本字段？

提前致谢。

Answer 1

您不能拥有多个具有相同ID的html元素（例如：编辑按钮）。这可能是＃1问题的一部分，而不会看到更多的代码。

出于多种原因，我会避免使用内联事件处理程序（onClick），但主要是因为它现在通常被认为是不好的做法。更重要的是，如果用户连接速度较慢，他们可能会在其余代码准备好之前单击按钮。根据{{1}}函数中的代码，这可能是不合需要的。相反，您应该使用jQuery的edit方法将函数绑定到DOM准备好的按钮。

所有这一切，我会让你的按钮根据click值获取相应的数据（来自在页面加载时加载的数组，或通过$.ajax调用）。然后，您可以将该数据传递给表单，然后弹出对话框。

数组示例

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>

现在，这是未经测试的，因此可能存在一些语法问题，但希望它能让您走上正确的轨道（或者至少考虑到提供的信息，我认为这是正确的轨道）。此外，我正在对返回的数据做出一些假设，等等。你应该在整个过程中做一些健全性检查。

Dialog看起来像这样：

$(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

将参数传递给jquery单击

1 个答案: