1

I have an HTML table where someone can add a new row in the table.

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

This table has some buttons in the rows which is the cause of my grief. I can successfully use jQuery ajax() to process this:

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

My problem is that not everything loads because it already has. For example, the buttons are all stylized with jQuery ui buttons:

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

I can add these to the success function but I'm not sure this is the best practice to duplicate my code. I guess that is easy enough to work around but I'm wondering if there is a better way to do this.

My other problem is that the CSS doesn't apply. So I have some padding between those buttons but I guess because its already loaded it doesn't show. Can anyone suggest a way around this?

Currently, the CSS is applied on page load only with:

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

1 回答 1

0

You're correct that the jQuery/editbutton call only modifies the buttons that already existed at the time, not buttons added in future rows.

Consider building your row in parts, adding the jQuery styles along the way:

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);
于 2013-04-26T15:51:39.267 回答