Drag and delete with jquery and php
Product Name Barcode Quantity
2*WHITER RIN (200 GM) 8901030295232 null
2*WHITER RIN JASMINE FRESH(500 GM) 8901030295201 null
2*WHITER RIN (200 GM) 8901030295232 null
2*WHITER RIN JASMINE FRESH(500 GM) 8901030295201 null
2*WHITER RIN (200 GM) 8901030295232 null
2*WHITER RIN JASMINE FRESH(500 GM) 8901030295201 null
2*WHITER RIN (200 GM) 8901030295232 null
2*WHITER RIN JASMINE FRESH(500 GM) 8901030295201 null
2*WHITER RIN (200 GM) 8901030295232 null
开发者_如何学运维 2*WHITER RIN JASMINE FRESH(500 GM) 8901030295201 null
2*WHITER RIN (200 GM) 8901030295232 null
2*WHITER RIN JASMINE FRESH(500 GM) 8901030295201 null
Delete
This is my table .I need a jquery function to select the particular row in such a way that it should be able to drag or select it and when i click on delete button it should be delete...Can anyone help me out to find a solution in jquery and php
view code
<?php $i=0;
foreach($aaa as $row)
{$i++;
?>
<tr>
<!-- <td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$i?></td> -->
<td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$row[0]?></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$row[1]?></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="rows"><?=$row[2]?></td>
</tr>
<?php
}
?>
I'm assigning the <tr> with an arbitrary class "record" <tr class="record">. And the delete button with id='deleterecords'. These are the click and delete functions.
// assign attribute selected to clicked rows
$("tr[class*='record']").click(function() {
// comment line below if you want multi-selected records,
$("tr[class*='selected']").removeClass("selected");
$(this).addClass("selected");
});
// remove selected records upon clicking delete
$("input[id='deleterecords']").click(function() {
$("tr[class*='selected']").remove()
});
This is a working implementation here. As for drag delete, I'm not sure of the user functionality.
As for your php code, Instead of
<?php $i=0;
foreach($aaa as $row)
{$i++;
?>
<tr>
Add the following class "record" to your <tr>.
<?php $i=0;
foreach($aaa as $row)
{$i++;
?>
<tr class='record'>
And make sure to add the following style and edit it later to what fancies you, it's just to mark which rows have been selected.
<style>
.selected {
background-color:gray;
}
</style>
Also, my delete button has the id='deleterecords'
<input type="button" id="deleterecords" value="Delete">
This is the full code in php. I removed the bgcolor attribute from the <td> because it overrides the background-color from the selected class.
<head>
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>
<style>
.selected {
background-color:gray !important;
}
</style>
</head>
<?php
$aaa = array();
$aaa[] = array(1, "Data One", "Data Two");
$aaa[] = array(2, "Data Three", "Data Four");
$aaa[] = array(3, "Data Five", "Data Five");
$aaa[] = array(4, "Data AAA", "Data BBB");
$aaa[] = array(5, "Data AAAAAA", "Data SSSSBBB");
?>
<table border=1>
<tr class='record'>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="rows">Row</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="rows">Data 1</td>
<td align="left" valign="middle" bgcolor="#FFFFFF" class="rows">Data 2</td>
</tr>
<?php $i=0;
foreach($aaa as $row)
{$i++;
?>
<tr class='record'>
<td align="left" valign="middle" class="rows"><?=$row[0]?></td>
<td align="left" valign="middle" class="rows"><?=$row[1]?></td>
<td align="left" valign="middle" class="rows"><?=$row[2]?></td>
</tr>
<?php } ?>
</table>
<input type="button" id="deleterecords" value="Delete">
<script type="text/javascript">
$(document).ready(function() {
// assign attribute selected to clicked rows
$("tr[class*='record']").live('click', function() {
// comment line below if you want multi-selected records,
$("tr[class*='selected']").removeClass("selected");
$(this).addClass("selected");
});
// remove selected records upon clicking delete
$("input[id='deleterecords']").live('click', function() {
$("tr[class*='selected']").remove();
});
});
</script>
Take a look at this tutorial:
http://robertfrew.wordpress.com/2010/03/25/drag-drop-sort-delete-with-jquery-jqueryui/
加载中,请稍侯......
精彩评论