js制作购物车的增删改查_用JSP做个网站实现购物车功能

⑴ 如何利用原生的js实现基本的增删改查功能

直接给个例子吧

包含两个文件（index.jsp和index.js）
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
</head>
<bodyonload="loadUserDatas()">
<divclass="container">
<tableclass="table"id="table">
<caption><h2>迈睿练习一</h2></caption>
<caption>
<buttontype="button"class="btnbtn-info"id="user_add"data-toggle="modal"
data-target="#myModal"onclick="optionUserData(this);">新增</button>
<buttontype="button"class="btnbtn-info"id="user_delete"onclick="optionUserData(this);">删除</button>
<buttontype="button"class="btnbtn-info"id="user_edit"data-toggle="modal"
data-target="#myModal"onclick="optionUserData(this);">编辑</button>
<buttontype="button"class="btnbtn-info"id="user_find"onclick="optionUserData(this);">查询</button>
<inputtype="text"id="s_code"placeholder="按工号查询"style="width:80px;">
<inputtype="text"id="s_userName"placeholder="按姓名查询"style="width:80px;">
<inputtype="text"id="s_all"placeholder="全文搜索"style="width:80px;">
</caption>
<thead>
<tr>
<th>序号</th>
<th>工号</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>年龄</th>
<th>出生日期</th>
</tr>
</thead>
<tbodyid="tbody">
</tbody>
</table>

<!--模态框（Modal）-->
<divclass="modalhide"id="myModal"role="dialog">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">
&times;
</button>
<h4class="modal-title"id="myModalLabel">
新增用户
</h4>
</div>
<divclass="modal-body"id="modal-body">
<labelfor="name">工号:</label>
<inputtype="text"class="form-control"id="m_code"placeholder="请输入工号">
<labelfor="name">姓名:</label>
<inputtype="text"class="form-control"id="m_userName"placeholder="请输入姓名">
<labelfor="name">性别:</label>
<inputtype="text"class="form-control"id="m_sex"placeholder="请输入性别">
<labelfor="name">密码:</label>
<inputtype="text"class="form-control"id="m_passWord"placeholder="请输入密码">
<labelfor="name">年龄:</label>
<inputtype="text"class="form-control"id="m_age"placeholder="请输入年龄">
<labelfor="name">出生日期:</label>
<inputtype="text"class="form-control"id="m_birthday"placeholder="请输入出生日期">
</div>
<divclass="modal-footer">
<buttontype="button"class="btnbtn-default"
data-dismiss="modal">保存
</button>
<buttontype="button"class="btnbtn-primary">提交更改</button>
</div>
</div><!--/.modal-content-->
</div><!--/.modal-->
</div>

<scripttype="text/javascript"src="resource/jquery/jquery.js"></script>
<scripttype="text/javascript"src="resource/bootstrap/js/bootstrap.min.js"></script>
<scripttype="text/javascript"src="index.js"></script>
</body>
</html>
复制代码
复制代码
//存放所有用户
varusers=users||{};
//操作类型
varoperateType="";
//存放搜索对象
varsearchUsers=searchUsers||{};
//用户构造方法
varUser={
Create:function(code,userName,sex,passWord,age,birthday){
this.code=code;
this.userName=userName;
this.sex=sex;
this.passWord=passWord;
this.age=age;
this.birthday=birthday;
},
//添加用户
addUserData:function(){
if(this.code!=""){
users[this.code]=this;
}
},
//删除用户
deleteUserData:function(){
for(variinusers){
if(this.code==users[i].code){
deleteusers[i];
}
}
},
//编辑用户
editUserData:function(){
for(variinusers){
if(this.code==users[i].code){
users[i].userName=this.userName;
users[i].sex=this.sex;
users[i].passWord=this.passWord;
users[i].birthday=this.birthday;
users[i].age=this.age;
}
}
},
//查找用户
findUserData:function(data){

for(variinusers){
if(data.code.indexOf(users[i].code)>=0||
data.userName.indexOf(users[i].userName)>=0){
searchUsers[users[i].code]=users[i];
refreshDatas(searchUsers);
}
}
}
};

functionNew(aClass,aParams){
functionnew_(){
aClass.Create.apply(this,aParams);
}
new_.prototype=aClass;
returnnewnew_();
}

//bootstrap模态框事件
$('#myModal').on('hide.bs.modal',function(){
//执行一些动作...
varinputElements=this.getElementsByTagName("input");
varuserArr=[];
for(vari=0;i<inputElements.length;i++){
userArr[i]=inputElements[i].value;
}
varuser=New(User,userArr);
//添加操作
if(operateType=="add"){
user.addUserData();
refreshDatas(users);
//编辑操作
}elseif(operateType=="edit"){
user.editUserData();
refreshDatas(users);
}
});

/**
*首次加载页面执行方法
*/
functionloadUserDatas(){
varuserArray=initUserDatas();
addRowData(userArray);
refreshDatas(users);

}
/**
*初始化用户数据
*/
functioninitUserDatas(){
varinitUser1=New(User,["1001","小兰","女","1234","13","1991-1-1"]);
varinitUser2=New(User,["1002","小毅","男","1234","13","1991-1-1"]);
varinitUser3=New(User,["1003","兰花","女","1234","13","1991-1-1"]);
varinitUser4=New(User,["1004","兰儿","女","1234","13","1991-1-1"]);
users[initUser1.code]=initUser1;
users[initUser2.code]=initUser2;
users[initUser3.code]=initUser3;
users[initUser4.code]=initUser4;
returnusers;
}

/**
*往表格添加一行html数据
*/
functionaddRowData(datas){
vartbodyElement=document.getElementById("tbody");
varhtml="";
varcolor="warning";
varflag=true;
for(variindatas){
if(flag){
color="info";
}else{
color="warning";
}
html=html+"<trclass='"+color+"'><tdstyle='width:30px;'><inputtype='checkbox'></td><tdid='code'>"
+datas[i].code+"</td><tdid='userName'>"
+datas[i].userName+"</td><tdid='sex'>"
+datas[i].sex+"</td><tdid='passWord'>"
+datas[i].passWord+"</td><tdid='age'>"
+datas[i].age+"</td><tdid='birthday'>"
+datas[i].birthday+"</td>"
+"</tr>";

flag=!flag;//颜色转换
}
tbodyElement.innerHTML=html;
}
/**
*刷新用户数据
*/
functionrefreshDatas(datas){
addRowData(datas);
};

/**
*收集一行数据
*/
functioncollectionRowData(param){
vartdElement=param.getElementsByTagName("td");
varuserArr=[];
for(vari=1;i<tdElement.length;i++){
vartemp=tdElement[i].textContent;
userArr[i-1]=temp;
}
varuser=New(User,userArr);
returnuser;
}
/**
*用户操作方法
*/
functionoptionUserData(param){
//获得操作类别
varoptionType=param.getAttribute("id");
if(optionType=="user_add"){
operateType="add";
}elseif(optionType=="user_delete"){
varcheckRowData=isCheckedData();
varuser=collectionRowData(checkRowData);
user.deleteUserData();
refreshDatas(users);
}elseif(optionType=="user_edit"){
operateType="edit";
varcheckRowData=isCheckedData();
varuser=collectionRowData(checkRowData);
varmodal_body=document.getElementById("modal-body");
varinputElements=modal_body.getElementsByTagName("input");
for(vari=0;i<inputElements.length;i++){
vartemp=inputElements[i].id.substring(2,inputElements[i].id.length)
inputElements[i].value=user[temp];
}
}elseif(optionType=="user_find"){
vars_code=document.getElementById("s_code").value;
vars_userName=document.getElementById("s_userName").value;
vars_all=document.getElementById("s_all").value;
//搜索数据
vars_data=s_data||{};
s_data.code=s_code;
s_data.userName=s_userName;
s_data.all=s_all;
varuser=New(User,[]);
user.findUserData(s_data);
}else{

}
}

/**
*是否选中数据,返回选中数据的行
*/
functionisCheckedData(){
vartbodyElement=document.getElementById("tbody");
vartrElements=tbodyElement.getElementsByTagName("tr");
varflag=false;
for(vari=0;i<trElements.length;i++){
varinputElement=trElements[i].getElementsByTagName("input")[0];
if(inputElement.checked){
flag=true;
returntrElements[i];
}
}
if(!flag){
alert("请选择一条记录！");
$('#myModal').unbind("on");
}
}

⑵ javascript实现增删改查

使用XMLHttpRequest
下面给一共例子
function commitEdit(type, val, id) {
var http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
var sendData = "val=" + val + "&type=" + type + "&id=" + id;
http_request.onreadystatechange = function() {alertContents(http_request, type);};
url = "listUpdate.jsp";
http_request.open('POST', url, true);
http_request.setRequestHeader("Content-Length", sendData.length);
http_request.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
http_request.send(sendData);
}

function alertContents(http_request, type) {
if (http_request.readyState == 4) {
var resTxt = trimString1(http_request.responseText);
if (resTxt == "-1") {
alert("内容不健康，添加错误！");
return;
}
if (type == "label") {
document.getElementById("listLabel").innerHTML = resTxt;
document.getElementById("addLabelLink").innerHTML = "修改标签";
} else if (type == "addLabel") {
document.getElementById("listLabel").innerHTML = resTxt;
document.getElementById("listLabelTr").style.display = 'block';
document.getElementById("addLabelLink").innerHTML = "修改标签";
document.getElementById("addLabelLink").href = "javascript:chngLabel();";
} else if (type == "listComment") {
document.getElementById("listReviewContext").innerHTML = resTxt;
} else if (type == "addFavorite") {
alert(resTxt);
}
}
}

⑶ 求助js购物车代码！要能点击添加按钮就直接在购物车显示出来!可以修改数量！

⑷ 用JSP做个网站实现购物车功能

建个购物车对象
把购买好的商品放到一个集合里

再把集合存到 session中
然后增删改查都操作 session中的集合
就OK了不是很难你试着写下这样提高才会快

⑸ 如何用纯Javascript代码写一个动态的输入的增删改查

动态输入的增删改查我是不是可以理解为用户输入的内容立即入库和更新？回
纯javascript很难实现除非用答iframe嵌入的方式把输入框弄成一个iframe中嵌入文本输入框然后绑定一个事件每写一个调用js方法提交并且返回来还要把保存的数据以参数方式带回来
太麻烦
简单方法可以使用Ajax异步提交实现推荐你使用DWR(ajax的一个框架)
可以给输入框一个onkeypress或者什么事件绑定到一个js方法中这个js方法与后台方法交互实现；

⑹ 怎么用JS做一个表格的增删改查

<!>
<html>
<head>
<metacharset="UTF-8">
<title>Document</title>
</head>
<body>
<tableid="tab"width="400px"border="1px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<hr>
<formname="myform"action=""onsubmit="returnfalse">
姓名：<inputtype="text"name="user"><br>
年龄：<inputtype="number"name="age"><br>
性别：<inputtype="text"name="sex"><br>
<br>
<buttononclick="getMessage()">提交</button>
</form>
<script>
vartab=document.getElementById('tab');
varuser=document.myform.user;
varage=document.myform.age;
varsex=document.myform.sex;
functiongetMessage(){
//创建行
vartr=tab.insertRow(tab.rows.length);
tr.insertCell(0).innerHTML=user.value;
tr.insertCell(1).innerHTML=age.value;
tr.insertCell(2).innerHTML=sex.value;
tr.insertCell(3).innerHTML='<buttononclick="del(this)">删除</button>';
}
functiondel(n){
varindex=n.parentNode.parentNode.rowIndex;
console.log(index);
tab.deleteRow(index);
}
</script>
</body>
</html>

上代码

⑺ js怎么实现增删改查

总结下来就是dom节点的读/写、添加/删除，请看下面的例子。
<!DOCTYPE html>
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//定义变量，保存选中的标签
var selectLi;
//定义变量，保存修改了的标签
var editedLi=false;
window.onload=function()
{
//新增li标签到末尾
document.getElementById("insertEnd").onclick = insertEndclick;
//新增li标签到指定位置
var liObj=document.getElementsByTagName("li");
for(var i=0;i<liObj.length;i++)
{
liObj[i].onclick = liChoose;
}
document.getElementById("insert").onclick = insertThere;
//删除指定标签
document.getElementById("delete").onclick = deleteli;
//修改指定标签内容
document.getElementById("edit").onclick = editLi;
//将选中的该标签变为文本框进行内容修改
document.getElementById("edit2").onclick = editLi2;
//将文本框中的内容保存
document.getElementById("save").onclick = saveLi;
}
//新增li标签到末尾
function insertEndclick()
{
var result = prompt("需要插入的li标签文本：", "小黑");
if (result)
{
var newli = document.createElement("li");
newli.innerHTML = result;
newli.onclick = liChoose;
document.getElementById("ulList").appendChild(newli);
}
}
//新增li标签到指定位置
function insertThere()
{
if (selectLi)
{
var result = prompt("需要插入的li标签文本：", "小黑");
if (result) {
var newli = document.createElement("li");
newli.innerHTML = result;
//需要给新增的li标签设置点击事件
newli.onclick = liChoose;
document.getElementById("ulList").insertBefore(newli, selectLi);
}
}
else
{
alert("请先选择要插入的位置");
}
}
//高亮选中的标签
function liChoose()
{
var ul = document.getElementsByTagName("li")
for (var i = 0; i < ul.length; i++)
{
ul[i].style.backgroundColor = "white";
}
this.style.backgroundColor = "yellow";
selectLi = this;
}
//删除指定标签
function deleteli()
{
if (selectLi)
{
selectLi.parentElement.removeChild(selectLi);
}
else
{
alert("请先选中要删除的标签");
}
}
//修改指定标签
function editLi()
{
if(selectLi)
{
var result = prompt("输入修改内容", "大白");
if(result)
{
selectLi.innerHTML = result;
}
}
else
{
alert("请选择要修改的标签");
}
}
//将选中的该标签变为文本框进行内容修改
function editLi2()
{
if(selectLi)
{
//创建一个文本框
var newli = document.createElement("input");
newli.type = "text";
//将文本框内容设置为li标签的文本值
newli.value = selectLi.innerHTML;
//将文本框添加到li标签内部
selectLi.removeChild(selectLi.childNodes[0]);
selectLi.appendChild(newli);
editedLi = true;
}
}
//将文本框中的内容保存
function saveLi()
{
if (editedLi)
{
var editValue = selectLi.childNodes[0].value;
selectLi.innerHTML = editValue;
}
else
{
alert("没有标签在编辑状态");
}
}
</script>
</head>
<body>
<div>
<input type="button" id="insertEnd" value="新增到末尾" />
<input type="button" id="insert" value="新增到指定位置" />
<input type="button" id="delete" value="删除" />
<input type="button" id="edit" value="修改" />
<input type="button" id="edit2" value="将选中标签变为文本标签进行修改" />
<input type="button" id="save" value="保存" />
</div>
<ul id="ulList">
<li>小猫</li>
<li>小鱼</li>
<li>小狗</li>
<li>大象</li>
<li>树懒</li>
</ul>
</body>
</html>

⑻ js中怎么实现用鼠标右键操作增删改查

这个自己定义鼠标右键方法，然后屏蔽事件冒泡，在添加增删改查的JS方法就可以了。

⑼ 求用jquery实现简单的增删改查，不要求界面，最好是增删改查各用一个js文件写，使用框架不限，上传项目

⑽ 求Js+SQL server实现增删改查啊

很遗憾的告诉你js没有那么强大~~js不能连接数据库

js制作购物车的增删改查

与js制作购物车的增删改查相关的内容