jquery Code:
<script type= "Text/javascript" >
$ (function () {
Calc (); Calculation method
Select all \ Reverse Selection
$ ("#selectAll"). Click (function () {
var $obj =$ (this). attr ("checked");
if ($obj) {
$ ("Input[name= ' Ck1 ')"). attr ("Checked", true);
}else{
$ ("Input[name= ' Ck1 ')"). attr ("checked", false);
}
});
Delete the selected
$ ("#deleteSelete"). Click (function () {
$ ("Input[name= ' Ck1 ']:checked"). each (function () {
$ (this). Parent (). Parent (). remove ();
});
Calc ();
});
Click Delete
$ ("#mytable. Delete"). Click (function () {
$ (this). Parent (). Parent (). remove ();
Calc ()
});
Number of stand-alone items +
$ ("#mytable. Add"). Click (function () {
Get a pre-order quantity
var $goodsCount = parseint ($ (this). Prev (). Val ());
$ (this). Prev (). val ($goodsCount + 1);
Calc ();
});
Number of stand-alone items-
$ ("#mytable. Cut"). Click (function () {
Get a pre-order quantity
var $goodsCount = parseint ($ (this). Next (). Val ());
$ (this). Next (). Val ($goodsCount <=1?1: $goodsCount-1);
Calc ();
});
Calculate price
Function Calc () {
Find common objects
var $obj = $ ("input[name= ' deletegoods ')";
var $obj = $ ("#mytable. Delete");//can also get objects
var sum = 0;
Loop Common object, let it loop to get the value of the object we want
$obj. each (function () {
Get the price of a product
var $price = parseint (this). Parent (). Prev (). Prev (). Prev (). html ());
Get the number of items
var $count = parsefloat (this). Parent (). Prev (). Prev (). Find ("Input"). Val ());
var timsum = $count * $price;
$ (this). Parent (). Prev (). HTML ("¥" +timsum);//Assign a value to the subtotal of the commodity
Sum +=timsum; Cumulative Total Price calculation
});
$ ("#sum"). html (sum);
};
Bind all input number input box events, enter values and automatically calculate
$ ("Input[name= ' Inputcount ')"). each (function () {
$ (this). KeyUp (function () {
var num = $ (this). Val ();
if (num!= "") {
Calc ();
}else{
$ ("#mytable. Cut"). Next (). Val (1); Assign a default number of 1
Calc ();
}
});
});
});
</script>
Style code:
<style type= "Text/css" >
. inputs{
width:20px;
}
#main {
padding:0px;
margin:0px;
position:relative;
}
#mytable {
width:400px;
}
#mytable td{
width:200px;
}
</style>
Body Code:
<body>
<div>
<div id= "Main" >
<table id= "MyTable" >
<tr>
<td>
<input type= "checkbox" Name= "All" id= "SelectAll" > select All
</td>
<td> Unit Price </td>
<td> Purchase number </td>
<td> Fees </td>
<td> Delete </td>
</tr>
<tr>
<td><input type= "checkbox" Name= "Ck1" id= "Ck1" ></td>
<td>123</td>
<td>
<input type= "Text" size= "4" value= "1" style= "width:20px" name= "Inputcount"/>
</td>
<td></td>
<td><input type= "button" value= "delete" class= "delete" name= "Deletegoods" ></td>
</tr>
<tr>
<td><input type= "checkbox" Name= "Ck1" id= "Ck2" ></td>
<td>432</td>
<td>
<input type= "Text" size= "4" value= "1" style= "width:20px" name= "Inputcount"/>
</td>
<td></td>
<td><input type= "button" value= "delete" class= "delete" name= "Deletegoods" ></td>
</tr>
<tr>
<td><input type= "checkbox" Name= "Ck1" id= "CK3" ></td>
<td>789</td>
<td>
<input type= "Text" size= "4" value= "1" style= "width:20px" name= "Inputcount"/>
</td>
<td></td>
<td><input type= "button" value= "delete" class= "delete" name= "Deletegoods" ></td>
</tr>
<tr>
<td><input type= "checkbox" Name= "Ck1" id= "Ck4" ></td>
<td>153</td>
<td>
<input type= "Text" size= "4" value= "1" style= "width:20px" name= "Inputcount"/>
</td>
<td></td>
<td><input type= "button" value= "delete" class= "delete" name= "Deletegoods" ></td>
</tr>
<TR><TD colspan= "5" align= "right" > Total cost: <span id= "sum" ></span></td></tr>
<TR><TD colspan= "5" ><input type= "button" value= "Delete selected items" id= "Deleteselete" > </td></tr>
</table>
</div>
</div>
</body>
The price of the jquery method increases with the quantity, deleting the current line and all rows