Using JQueryUI Dialog, how can I remove a table row that is displayed using <A>
Can anyone assist with how to successfully use JQueryUI Dialog where I remove a table row that is displayed in the dialog by using a link or some other mechanism?
Here is a visual of the code I'm working with
HTML
<tr>
<td>1/1/0001</td>
<td>THOMAS</td>
<td>LNAMEONE<input type="hidden" id="name_17053942" value="LNAMEONE" /></td>
<td>SKIN TW</td>
<td>17053942<input type="hidden" id="number_17053942" value="SKINNER" /></td>
<td>1/7/2009</td><td>Graph Trend View <a href="#" id="17053942" class="ui-state-add ui-corner-all">Add</a></td>
<td class="hide-cell">
<!-- ui-dialog -->
<div id="dialog_17053942_message" title="17053942 THOMAS SKINNER">
<p></p>
</div>
</td>
</tr>
<tr>
<td>6/21/2010</td>
<td>EMERY</td>
<td>LNAMETWO<input type="hidden" id="name_ZF365763B" value="LNAMETWO" /></td>
<td>RAND E</td>
<td>ZF365763B<input type="hidden" id="number_ZF365763B" value="ZF365763B" /></td>
<td>1/7/2009</td><td>Graph Trend View <a href="#" id="ZF365763B" class="ui-state-add ui-corner-all">Add</a></td>
<td class="hide-cell">
<!-- ui-dialog -->
<div id="dialog_ZF365763B_message" title="ZF365763B EMERY RANDOLPH">
<p></p>
</div>
</td>
</tr>
JQUERY
$(function() {
// Dialog
$('#carrier-list').dialog({
autoOpen: false,
resizable: false,
height: 260,
modal: true,
width: 240,
buttons: {
"Compare Carriers": function() {
$(this).dialog('close');
},
"Save": function() {
$(this).dialog('close');
}
}
});
// Dialog Link
// This adds a carrier to a list
$('.ui-state-add').click(function() {
var target = $(this).attr("id");
//alert(target);
$("#carrier-table").prepend("<tr id='" + target + "'>" +
"<td><a href='#' id='" + target + "' class='ui-state-remove ui-corner-all'>remove</a></td>" +
"<td>" + target + "</td>" +
"<td>" + $("#name_" + target).val() + "</td>" +
"</tr>");
$('#carrier-list').dialog('open');
return false;
});
//hover states on the static widgets
$('.ui-state-add').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeC开发者_如何学Golass('ui-state-hover'); }
);
// Remove Dialog Link
// This adds a carrier to a list
$('.ui-state-remove').click(function() {
var target = $(this).attr("id");
alert(target);
$('#' + target).remove(); ;
//$('#carrier-list').dialog('open');
return false;
});
});
I came up with a solution.
<script type="text/javascript" id="removeCarrier">
function removeCarrierFromList(obj) {
var i = obj.parentNode.parentNode.rowIndex;
document.getElementById('carrier-table').deleteRow(i);
$('#' + obj.id).removeClass('delete-carrier-company');
//alert(obj.id); //.hasClass('add-carrier-company').tostring() ); //
$('#' + obj.id).bind('click', function() {
//alert('User clicked on ' + obj.id);
});
}
</script>
精彩评论