动态模拟实现购物车的功能
方法1:js实现:
效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
background: lavenderblush;
}
</style>
<script type="text/javascript">
function addrow(){
var idV = document.getElementById("id").value
var nameV = document.getElementById("name").value
var priceV = document.getElementById("price").value;
var td0=document.createElement("td");
td0.innerHTML='<input type="checkbox" checked="checked" name="tdBox"/>'
var td1=document.createElement("td");
td1.innerText=idV;
var td2=document.createElement("td");
td2.innerText=nameV;
var td3=document.createElement("td");
td3.innerText=priceV;
var td4=document.createElement("td");
td4.innerHTML='<a href="javascript:void(0)" onclick="delRow(this);">delete</a>';
//alert(td3.value);
var tr0=document.createElement("tr");
tr0.appendChild(td0);
tr0.appendChild(td1);
tr0.appendChild(td2);
tr0.appendChild(td3);
tr0.appendChild(td4);
var tb0=document.getElementById("tb");
tb0.appendChild(tr0);
}
function delRow (row_a) {
var tb= document.getElementById("tb");
var row=row_a.parentNode.parentNode;
tb.removeChild(row);
}
function deleleRow(){
var boxs = document.getElementsByName("tdBox");
//
for(var i=0;i<boxs.length;i){
if(boxs[i].checked){
delRow(boxs[i]);
}
else{
i++;
}
}
}
function reverseSelect(){
var boxs = document.getElementsByName("tdBox");
for(var i=0;i<boxs.length;i++){
boxs[i].checked=!boxs[i].checked;
}
var box1 = document.getElementsByName("Box");
var tag=1;
for(var i=0;i<boxs.length;i++){
if(!boxs[i].checked){
tag=0;
}
}
if(tag){
box1[0].checked=true;
}
else{
box1[0].checked=false;
}
}
function sel(sel_all){
var boxs = document.getElementsByName("tdBox");
var tag=1;
for(var i=0;i<boxs.length;i++){
if(!boxs[i].checked){
tag=0;
}
}
if(tag){
for(var i=0;i<boxs.length;i++){
boxs[i].checked=false;
}
}
else{
for(var i=0;i<boxs.length;i++){
boxs[i].checked=true;
}
}
}
</script>
</head>
<body>
<center>
id:<input type="text" id='id'/>
price:<input type="text" id='price'/>
name:<input type="text" id='name'/>
</center>
<hr size="4"/>
<table align="center" border="1px" width="500px">
<thead>
<tr>
<td>
<input type="checkbox" checked="checked" onclick="sel(this)" name="Box"/>全选
</td>
<td>
id
</td>
<td>
name
</td>
<td>
price
</td>
<td>
delete
</td>
</tr>
</thead>
<tbody id='tb'>
<tr>
<td>
<input type="checkbox" checked="checked" name="tdBox"/>
</td>
<td>
1
</td>
<td>
苹果
</td>
<td>
$1.22
</td>
<td>
<a href="#" onclick="delRow(this)">delete</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" name="tdBox"/>
</td>
<td>
2
</td>
<td>
梨
</td>
<td>
$1.58
</td>
<td>
<a href="#" onclick="delRow(this)">delete</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked="checked" name="tdBox"/>
</td>
<td>
3
</td>
<td>
奇异果
</td>
<td>
$5.22
</td>
<td>
<a href="#" onclick="delRow(this)">delete</a>
</td>
</tr>
</tbody>
</table>
<center>
<input type="button" value="添加" onclick="addrow();" />
<input type="button" value="删除选中" onclick="deleleRow();" />
<input type="button" value="反选" onclick="reverseSelect();" />
</center>
</body>
</html>
方法2:jquery实现
效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
background-color: #FFF0F5;
}
</style>
</head>
<body>
<center>
name:<input type="text" name="name" id="name" value="" /> price:
<input type="text" name="price" id="price" value="" />
<input type="button" value="add" style="margin-left: 30px;" />
</center>
<hr size="3" />
<table border="1" bordercolor="orange" cellspacing="0" width="70%" align="center">
<tr bgcolor="lightblue" align="center">
<td><b> </b></td>
<td><b> Id </b></td>
<td><b> Name </b></td>
<td><b> Price </b></td>
<td><b> Count </b></td>
<td><b> Total_Price </b></td>
<td><b> Delete </b> </td>
</tr>
<tbody id="tbody" align="center">
<tr>
<td> <input type="checkbox" /> </td>
<td>1</td>
<td>Iphone6</td>
<td>5000</td>
<td><input type="button" value="-" /><input type="text" size="4" value="1" /><input type="button" value="+" /></td>
<td>5000</td>
<td> <input type="button" value="delete" class="delete" /> </td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>2</td>
<td>Iphone7</td>
<td>6000</td>
<td><input type="button" value="-" /><input type="text" size="4" value="1" /><input type="button" value="+" /></td>
<td>6000</td>
<td> <input type="button" value="delete" class="delete" /> </td>
</tr>
<tr>
<td> <input type="checkbox" /> </td>
<td>3</td>
<td>Ipad</td>
<td>6000</td>
<td><input type="button" value="-" /><input type="text" size="4" value="1" /><input type="button" value="+" /></td>
<td>6000</td>
<td> <input type="button" value="delete" class="delete" /> </td>
</tr>
</tbody>
</table>
<center>
<input type="button" name="selete_all" id="selete_all" value="selete all" style="margin: 20px;" />
<input type="button" name="del_selete_all" id="del_selete_all" value="del_selete all" style="margin: 20px;" />
<input type="button" name="反选" id="reserve_all" value="reserve_all" style="margin: 20px;" />
</center>
</body>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
/*add*/
$(":button[value=add]").click(function() {
var idV;
//alert($("#tbody tr:last td:eq(1)").text());
if(isNaN(parseInt($("#tbody tr:last td:eq(1)").text()))) {
idV = 1;
} else {
var num = parseInt($("#tbody tr:last td:eq(1)").text());
idV = num + 1;
}
var nameV = $("#name").val();
var priceV = $("#price").val();
var td1 = "<td><input type='checkbox'/></td>";
var td2 = "<td>" + idV + "</td>";
var td3 = "<td>" + nameV + "</td>";
var td4 = "<td>" + priceV + "</td>";
var td5 = "<td><input type='button' value='-' /><input type='text' size='4' value='1' /><input type='button' value='+' /></td>";
var td6 = "<td>" + priceV + "</td>";
var td7 = "<td> <input type='button' value='delete' class='delete'/> </td>"
$("#tbody").append("<tr></tr>");
$("tbody tr:last").append(td1).append(td2).append(td3).append(td4).append(td5).append(td6).append(td7);
})
$("#reserve_all").click(function() {
$(":checkbox").each(function(index) {
if($(this).prop("checked")) {
$(this).prop("checked", false)
} else {
$(this).prop("checked", true)
}
})
})
$("#selete_all").click(function() {
var tag = 1;
$(":checkbox").each(function(index) {
if($(this).prop("checked")) {
} else {
tag = 0;
}
})
if(tag) {
$(":checkbox").each(function(index) {
$(this).prop("checked", false)
})
} else {
$(":checkbox").each(function(index) {
$(this).prop("checked", true)
})
}
})
$(".delete").live('click', function() {
$(this).parent().parent().remove();
$(":checkbox").each(function(index) {
$(this).parent().next().text(function(i, origText) {
return index + 1;
})
})
})
$("#del_selete_all").live('click', function() {
$(":checkbox").each(function(index) {
if($(this).prop("checked")) {
$(this).parent().parent().remove();
}
})
$(":checkbox").each(function(index) {
$(this).parent().next().text(function(i, origText) {
return index + 1;
})
})
})
$(":button[value='-']").live('click', function() {
var num = parseInt($(this).next().val()) - 1;
if(num <= 0) {
$(this).parent().parent().remove();
$(":checkbox").each(function(index) {
$(this).parent().next().text(function(i, origText) {
return index + 1;
})
})
} else {
$(this).next().val(function(i, origText) {
return num;
});
if(num <= 0) {
$(this).parent().parent().remove();
} else {
var price = parseInt($(this).parent().prev().text());
price *= num;
$(this).parent().next().text(function(i, origText) {
return price;
})
}
}
});
$(":text:gt(1)").live('blur', function() {
var value = parseInt($(this).val());
//alert(value);
if(value == 0) {
$(this).parent().parent().remove();
$(":checkbox").each(function(index) {
$(this).parent().next().text(function(i, origText) {
return index + 1;
})
})
} else if(isNaN(value)) {
$(this).parent().parent().remove();
$(":checkbox").each(function(index) {
$(this).parent().next().text(function(i, origText) {
return index + 1;
})
})
} else {
var prices = parseInt($(this).parent().prev().text());
$(this).parent().next().text(prices * value);
}
})
$(":button[value='+']").live('click', function() {
var num = parseInt($(this).prev().val()) + 1;
$(this).prev().val(function(i, origText) {
return num;
});
var price = parseInt($(this).parent().prev().text());
price *= num;
//alert(price);
$(this).parent().next().text(function(i, origText) {
return price;
})
});
</script>
</html>