수량에 추가 된 새로운 행을 변경하는 문장이 추가됨

안녕하세요 저는 매우 새롭습니다. 따라서 서식이나 질문에 오류가 생기면 수정하십시오!수량에 추가 된 새로운 행을 변경하는 문장이 추가됨

간단한 쇼핑 바구니 파일을 만들려고하는데 바구니 내의 항목 수량을 변경하는 데 도움이 필요합니다. 현재 테이블에 새 행을 추가하고 채우는 버튼을 만들 수 있습니다. 항목이 이미 테이블에 있는지 확인하고 함수가있는 경우 수량 셀만 업데이트하는 기능이 부족합니다. IF 문으로 쓸모 없기 때문에 어떤 도움이라도 인정받을 것입니다!

 <table id="basket" border = "1"> 
    <tr bgcolor="#9acd32"> 
     <th> Product </th> 
     <th> Description </th> 
     <th> Quantity </th> 
     <th> Price </th> 
     <th colspan="2"> Add/Remove items </th> 
    </tr> 
</table>

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function additem1() { 

    var table = document.getElementById("basket"); 
    var row1 = table.insertRow(1); 
    var cell1 = row1.insertCell(0); 
    var cell2 = row1.insertCell(1); 
    var cell3 = row1.insertCell(2); 
    var cell4 = row1.insertCell(3); 
    var cell5 = row1.insertCell(4); 
    var cell6 = row1.insertCell(5); 
cell1.innerHTML = "Shorts (f)"; 
cell2.innerHTML = "Stone Wash"; 
cell3.innerHTML = "1"; 
cell4.innerHTML = ""; 
cell5.innerHTML = ""; 
cell6.innerHTML = ""; 
; 

} 
</script> 
<style> 
table, td { 
    border: 1px solid black; 
} 
</style> 
</head> 
<body> 
    <h2> List of Items </h2> 
    <table border="1"> 
    <tr bgcolor="#9acd32"> 
     <th> Product </th> 
     <th> Description </th> 
     <th> Quantity </th> 
     <th> Price </th> 

      <tr> 
    <td> Shorts (F) </td> 
    <td> Stone wash Denim shorts </td> 
    <td> 20 </td> 
    <td> 25.90 </td> 
    <td> <button onclick= "additem1()"> Add Item To Basket </button> </td> 

    </table>

첫 번째 테이블이 항목의 정보를 보유 볼 수 있고, 두 번째 테이블은 바구니 정보를 보유하고있다.

출처

2015-01-11 Andrew fox

js 코딩에 대해 깊이 생각해보십시오. 요소가 이미 존재하는지 확인한 다음 수량이 증가하는지 여부를 확인할 수 있습니다.

나는 좀 더 일반적인 코드를 만들었지 만 작업 바구니의 경우 할 일이 더 많다. 그것이 당신의 직업이다.

코드 :

function additem1(e) { 
    var oRow = e.parentNode.parentNode 
    var prod = oRow.cells[0].innerHTML; 
    var des = oRow.cells[1].innerHTML; 
    var table = document.getElementById("basket"); 

    var row1 = GetCellValues(prod); 
    if (typeof row1 === 'undefined') { 
     row1 = table.insertRow(1); 
     var cell1 = row1.insertCell(0); 
     var cell2 = row1.insertCell(1); 
     var cell3 = row1.insertCell(2); 
     var cell4 = row1.insertCell(3); 
     var cell5 = row1.insertCell(4); 
     var cell6 = row1.insertCell(5); 
     cell1.innerHTML = prod; 
     cell2.innerHTML = des; 
     cell3.innerHTML = "1"; 
     cell4.innerHTML = ""; 
     cell5.innerHTML = ""; 
     cell6.innerHTML = "";; 
    } else { 
     row1.cells[2].innerHTML = parseInt(row1.cells[2].innerHTML) + 1 
    } 

} 

function GetCellValues(prod) { 
    var table = document.getElementById('basket'); 
    for (var r = 0, n = table.rows.length; r < n; r++) { 
     for (var c = 0, m = table.rows[r].cells.length; c < m; c++) { 
      if (table.rows[r].cells[c].innerHTML == prod) return table.rows[r]; 
     } 
    } 
    return 
}

데모 : http://jsfiddle.net/85o9yz02/

출처

2015-01-11 12:40:50

이 큰 노력하고 있습니다! 정말 고맙습니다! –

수량에 추가 된 새로운 행을 변경하는 문장이 추가됨

답변

관련 문제