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製作購物車的增刪改查相關的內容