Question

我有一个HTML表格，有人可以在表格中添加新行。

<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>Sensitivity</th>
        <th>Actions</th>
    </tr>
</thead>

<tbody>
    <tr data-hash="http://www.my.com/notify.php/67caf4d223169c05b8c700acfb615af13a5d3ab9">
        <td>
            AXIS                        </td>
        <td title="asdf">
            asdf                        </td>
        <td>
            HIGH                        </td>
        <td>
            On                      </td>
        <td>
            On                      </td>
        <td>
            N/A                     </td>
        <td>
            <button class="editbutton" onClick='edit(this, "AXIS", "asdf", "0", "67caf4d223169c05b8c700acfb615af13a5d3ab9", "1", "1", "1", "asdf", "asdf", "234")'>Edit Camera</button>

            <button class="deletebutton" data-delete="67caf4d223169c05b8c700acfb615af13a5d3ab8">Delete Camera</button>

            <button class="axis-detailsbutton">API Key</button>
        </td>
    </tr>
</tbody>
</table>

这个表格中有一些按钮，这是我悲伤的原因。我可以成功使用jQuery ajax()来处理这个：

var dataString = "cameratype=" + cameratype + "&cameraname=" + cameraname + "&cameraquality=" + cameraquality + "&camerastatus=" + camerastatus + "&emailnotice=" + emailnotice + "&camerauser=" + camerauser + "&camerapass=" + camerapass + "&cameraip=" + cameraip + "&cameraport=" + cameraport +"&format=raw";

jQuery.ajax({
    url: "index.php?option=com_cam&task=add",
    dataType: 'json',
    data: dataString,
    success: function(data){
        //bunch of stuff here that figures out the parameters

        jQuery("#webcam-table > tbody:last").append("<tr><td>"+cameratype+"</td><td>"+cameraname+"</td><td>"
                +cameraquality+"</td><td>"+params.camerastatus+"</td><td>"
                +params.emailnotice+"</td><td>"+params.sensitivity+"</td><td><button class=\"editbutton\" onClick='edit(this, \""
                +cameratype+"\", \""+cameraname+"\", \""+params.cameraqualityedit+"\", \""
                +data.camerahash+"\", \""+params.camerastatusedit+"\", \""+params.emailnoticeedit+"\", \"\", \""
                +camerauser+"\", \""+cameraip+"\", \""+cameraport+"\")'>Edit Camera</button><button class=\"deletebutton\" data-delete=\""
                +data.camerahash+"\">Delete Camera</button><button class=\"axis-detailsbutton\">API Key</button></td></tr>"); 
    } 
});

我的问题是，并非所有东西都加载，因为它已经有了。例如，按钮都使用jQuery ui按钮进行了风格化：

jQuery( ".editbutton" ).button({
    icons: {
      primary: "ui-icon-pencil"
    },
    text:false
});

我可以将这些添加到success函数中，但我不确定这是复制代码的最佳做法。我想这很容易解决，但我想知道是否有更好的方法来做到这一点。

我的另一个问题是CSS不适用。所以我在这些按钮之间有一些填充，但我想因为它已经加载它没有显示。任何人都可以建议解决这个问题吗？

目前，CSS仅适用于页面加载：

<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.20.custom.css" />
<link rel="stylesheet" href="css/jquery.ibutton.min.css" type="text/css" />

Answer 1

你是正确的，jQuery / editbutton调用只修改当时已存在的按钮，而不是将来添加的按钮。

考虑在部分中构建行，并在此过程中添加jQuery样式：

var newtr = jQuery("<tr><td>"+cameratype+"</td><td>"+cameraname+"</td><td>"
                    +cameraquality+"</td><td>"+params.camerastatus+"</td><td>"
                    +params.emailnotice+"</td><td>"+params.sensitivity+"</td></tr>");

var editbutton = jQuery("<button class=\"editbutton\" onClick='edit(this, \""
                    +cameratype+"\", \""+cameraname+"\", \""+params.cameraqualityedit+"\", \""
                    +data.camerahash+"\", \""+params.camerastatusedit+"\", \""+params.emailnoticeedit+"\", \"\", \""
                    +camerauser+"\", \""+cameraip+"\", \""+cameraport+"\")'>Edit Camera</button>")
   .button({
                icons: {
                    primary: "ui-icon-pencil"
                },
                text:false
            });
jQuery("<td></td>").append(editbutton).appendTo(newtr);

// .. etc. for the other buttons

jQuery("#webcam-table > tbody:last").append(newtr);

将jQuery UI按钮样式应用于由load（）替换的元素

1 个答案: