<p><script type="text/javascript"></p> <p>    </p> <p>// mouse over tr idx</p> <p>var trIdx = 0;</p> <p> <br></p> <p>//주문추가</p> <p>function  addOrder(orderNameNewObj,price){</p> <p>    //alert(orderName+price);</p> <p>    </p> <p>    var orderNameNew = orderNameNewObj.innerHTML;</p> <p>    </p> <p>    //테이블 리스트 가져오기.</p> <p>    var table = document.getElementById('orderList');</p> <p>    var rowList = table.rows;</p> <p>    var rowCount = rowList.length;</p> <p>    //alert(rowCount);</p> <p>    </p> <p>    if(rowCount>1){</p> <p>        var isOrderExist = false;</p> <p>        for (i=1; i<rowCount; i++) {</p> <p>            var row = rowList[i];</p> <p>            var orderName = row.cells[0].innerHTML;</p> <p>            if(orderName==orderNameNew){</p> <p>                isOrderExist=true;</p> <p>                //수량</p> <p>                var orderCount=row.cells[2].innerHTML;</p> <p>                var orderCountNew = Number(orderCount)+1;</p> <p>                </p> <p>                //단가 한개가격</p> <p>                var orderPrice=row.cells[1].innerHTML;</p> <p>                </p> <p>                //금액</p> <p>                var rowSumPrice = orderCountNew * orderPrice;</p> <p>                </p> <p>                row.cells[2].innerText=orderCountNew;</p> <p>                row.cells[3].innerText=rowSumPrice;</p> <p>                </p> <p>                </p> <p>                </p> <p>            }</p> <p>        }</p> <p>        showAllPrice();</p> <p>        if(!isOrderExist){</p> <p>            addOrderNew(orderNameNew,price);</p> <p>        }</p> <p>    }</p> <p>    // 주문 새로이 추가.</p> <p>    else{</p> <p>        addOrderNew(orderNameNew,price);</p> <p>        </p> <p>    }</p> <p>}</p> <p> <br></p> <p>//신규주문 추가.</p> <p>function addOrderNew(orderNameNew,price){</p> <p>    var table = document.getElementById('orderList');</p> <p>    </p> <p>    var newRow = table.insertRow();</p> <p> <br></p> <p>    var newCell1 = newRow.insertCell(0);</p> <p>    newCell1.innerText = orderNameNew;</p> <p>    </p> <p>    var newCell2 = newRow.insertCell(1);</p> <p>    newCell2.innerText = price;</p> <p>    </p> <p>    var newCell3 = newRow.insertCell(2);</p> <p>    newCell3.innerText = 1;</p> <p>    </p> <p>    var newCell4 = newRow.insertCell(3);</p> <p>    newCell4.innerText = price;</p> <p>    </p> <p>    //마이너스 </p> <p>    var newCell5 = newRow.insertCell(4);</p> <p>    newCell5.innerHTML = '<button style="font-size:20px" type="button" onclick="miunsOrder(this);">빼기</button> <button style="font-size:20px" type="button" onclick="plusOrder(this);">추가</button>';</p> <p>    </p> <p>    //row 삭제</p> <p>    var newCell6 = newRow.insertCell(5);</p> <p>    newCell6.innerHTML = '<button style="font-size:20px" type="button" onclick="deleteRow(this);">X</button>';</p> <p>    </p> <p>    showAllPrice();</p> <p>    </p> <p>}</p> <p> <br></p> <p>//수량감소</p> <p>function miunsOrder(btn){</p> <p>    var rowIdx = btn.parentNode.parentNode.rowIndex;</p> <p>    var table = document.getElementById('orderList');</p> <p>    //alert(rowIdx);</p> <p>    var row = table.rows[rowIdx];</p> <p>    </p> <p>    var orderCount=row.cells[2].innerHTML;</p> <p>    if(orderCount>1){</p> <p>        var orderCountNew = Number(orderCount)-1;</p> <p>    </p> <p>        //단가 한개가격</p> <p>        var orderPrice=row.cells[1].innerHTML;</p> <p>        </p> <p>        //금액</p> <p>        var rowSumPrice = orderCountNew * orderPrice;</p> <p>        </p> <p>        row.cells[2].innerText=orderCountNew;</p> <p>        row.cells[3].innerText=rowSumPrice;</p> <p>    }</p> <p>    </p> <p>    showAllPrice();</p> <p>    </p> <p>}</p> <p> <br></p> <p>//수량추가</p> <p>function plusOrder(btn){</p> <p>    var rowIdx = btn.parentNode.parentNode.rowIndex;</p> <p>    var table = document.getElementById('orderList');</p> <p>    //alert(rowIdx);</p> <p>    var row = table.rows[rowIdx];</p> <p>    </p> <p>    var orderCount=row.cells[2].innerHTML;</p> <p> <br></p> <p>    var orderCountNew = Number(orderCount)+1;</p> <p> <br></p> <p>    //단가 한개가격</p> <p>    var orderPrice=row.cells[1].innerHTML;</p> <p>    </p> <p>    //금액</p> <p>    var rowSumPrice = orderCountNew * orderPrice;</p> <p>    </p> <p>    row.cells[2].innerText=orderCountNew;</p> <p>    row.cells[3].innerText=rowSumPrice;</p> <p> <br></p> <p>    </p> <p>    showAllPrice();</p> <p>    </p> <p>}</p> <p> <br></p> <p> <br></p> <p> <br></p> <p>//로우 삭제</p> <p>function deleteRow(btn){</p> <p>    var rowIdx = btn.parentNode.parentNode.rowIndex;</p> <p>    var table = document.getElementById('orderList');</p> <p>    //alert(rowIdx);</p> <p>    var row = table.rows[rowIdx];</p> <p>    </p> <p>    table.deleteRow(rowIdx);</p> <p>    </p> <p>    showAllPrice();</p> <p>}</p> <p> <br></p> <p>//전체 합계금액 표시.</p> <p>function showAllPrice(){</p> <p>    </p> <p>    var showTable = document.getElementById('sumPrice');</p> <p>    var showCell = showTable.rows[0].cells[1];</p> <p>    </p> <p>    var table = document.getElementById('orderList');</p> <p>    var rowList = table.rows;</p> <p>    var rowCount = rowList.length;</p> <p>    if(rowCount>1){</p> <p>        var sumPrice = 0;</p> <p>        for (i=1; i<rowCount; i++) {</p> <p>            var row = rowList[i];</p> <p>            var orderRowSumPrice = row.cells[3].innerHTML;</p> <p>            sumPrice += Number(orderRowSumPrice);</p> <p>        }</p> <p>        showCell.innerText = sumPrice;</p> <p>    }</p> <p>    else{</p> <p>        showCell.innerText = 0;</p> <p>    }</p> <p>    </p> <p>}</p> <p> <br></p> <p>//전체삭제</p> <p>function allDelete(){</p> <p>    var table = document.getElementById('orderList');</p> <p>    var rowList = table.rows;</p> <p>    var rowCount = rowList.length;</p> <p>    </p> <p>    for (i=rowCount; i>1; i--) {</p> <p>        table.deleteRow(i-1);</p> <p>    }</p> <p>    showAllPrice();</p> <p>}</p> <p> <br></p> <p> <br></p> <p> <br></p> <p>var enter='\n';</p> <p> <br></p> <p>// 현재 주문 목록 밑에 넣기.</p> <p>function addBottomList(){</p> <p>    var currentDate = new Date();</p> <p>    </p> <p>    // 각 구성 요소를 가져오기</p> <p>    const year = currentDate.getFullYear();</p> <p>    const month = currentDate.getMonth() + 1;</p> <p>    const day = currentDate.getDate();</p> <p>    const hours = currentDate.getHours();</p> <p>    const minutes = currentDate.getMinutes();</p> <p>    const seconds = currentDate.getSeconds();</p> <p> <br></p> <p>    // 날짜와 시간을 문자열로 포맷팅</p> <p>    const formattedDate = `${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')} ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;</p> <p>    </p> <p>    </p> <p>    // 이전 글자</p> <p>    var orderedListObj = document.getElementById('orderedList');</p> <p>    var orderedListStr = orderedListObj.value;</p> <p>    </p> <p>    </p> <p>    </p> <p>    //새로 추가할 글자 </p> <p>    var newAddStr = formattedDate+enter;</p> <p>    </p> <p>    var table = document.getElementById('orderList');</p> <p>    var rowList = table.rows;</p> <p>    var rowCount = rowList.length;</p> <p>    </p> <p>    //합계금액</p> <p>    var sumPrice = 0;</p> <p>    </p> <p>    for (i=1; i<rowCount; i++) {</p> <p>        var row = rowList[i];</p> <p>        var orderName = row.cells[0].innerHTML;</p> <p>        </p> <p>        //수량</p> <p>        var orderCount=row.cells[2].innerHTML;</p> <p>        </p> <p>        //단가 한개가격</p> <p>        var orderPrice=row.cells[1].innerHTML;</p> <p>        </p> <p>        //금액</p> <p>        var rowSumPrice = orderCount * orderPrice;</p> <p>        </p> <p>        sumPrice += rowSumPrice;</p> <p> <br></p> <p>        </p> <p>        newAddStr += orderName+"\t"+orderCount+"*"+orderPrice+"="+rowSumPrice+enter;</p> <p>    }</p> <p>    //합계 </p> <p>    newAddStr += "합계    : "+sumPrice+enter;</p> <p>    newAddStr += enter;</p> <p>    </p> <p>    newAddStr += orderedListStr;</p> <p>    </p> <p>    </p> <p>    orderedListObj.value=newAddStr;</p> <p>    </p> <p>    //이후 목록 삭제.</p> <p>    allDelete();</p> <p>    </p> <p>}</p> <p> <br></p> <p>//주문 목록  삭제.</p> <p>function deleteBottomList(){</p> <p>    var orderedListObj = document.getElementById('orderedList');</p> <p>    orderedListObj.value="";</p> <p>}</p> <p> <br></p> <p> <br></p> <p>// 오늘 총 주문 현황</p> <p>function showAllOrder(){</p> <p>    var orderedListObj = document.getElementById('orderedList');</p> <p>    var orderListStr = orderedListObj.value;</p> <p>    </p> <p>    const allMenuList = new Array();</p> <p>    </p> <p>    //일자시간 별 합계금액</p> <p>    var dayTimeStr = "";</p> <p>    const dayTimeList = new Array();</p> <p>    </p> <p>    //enter 로 split</p> <p>    var spltStrs = orderListStr.split(enter);</p> <p>    for (i=0; i<spltStrs.length; i++) {</p> <p>        var rowStr = spltStrs[i];</p> <p>        </p> <p>        // 날짜시간 값 . </p> <p>        if(rowStr.indexOf(":")>-1){</p> <p>            dayTimeStr = rowStr.split(":")[0];</p> <p>        }</p> <p>        </p> <p>        // 날짜와 합계 제외.</p> <p>        if(rowStr.indexOf("=")>-1 && !(rowStr.indexOf("합계")>-1) ){</p> <p>            var rowSpltStr = rowStr.split("\t");</p> <p>            var orderName = rowSpltStr[0];</p> <p>            // 수량 단가 , 합계.</p> <p>            var lastTabStr = rowSpltStr[1];</p> <p>            </p> <p>            var lastTabSplts = lastTabStr.split("=");</p> <p>            </p> <p>            //수량 단가</p> <p>            var menuCount=Number(lastTabSplts[0].split("*")[0]);</p> <p>            var menuAmt=Number(lastTabSplts[0].split("*")[1]);</p> <p>            </p> <p>            </p> <p>            </p> <p>            </p> <p>            // array 에 있는지 확인</p> <p>            var isExist = false;</p> <p>            for(j=0;j<allMenuList.length;j++){</p> <p>                var rowArray = allMenuList[j];</p> <p>                </p> <p>                var chkName = rowArray[0];</p> <p>                </p> <p>                if(chkName==orderName){</p> <p>                    isExist=true;</p> <p>                    </p> <p>                    //기존 수량 가져오기.</p> <p>                    var oldCount = rowArray[1];</p> <p>                    </p> <p>                    var newSumCount = menuCount+oldCount;</p> <p>                    </p> <p>                    allMenuList[j] = new Array(orderName,newSumCount,menuAmt);</p> <p>                }</p> <p>            }</p> <p>            </p> <p>            // 없으면 추가.</p> <p>            if(!isExist){</p> <p>                var newAddArray = new Array(orderName,menuCount,menuAmt);</p> <p>                allMenuList.push(newAddArray);</p> <p>            }</p> <p>            </p> <p>            </p> <p>            </p> <p>            //일자시간 array에 있는지 확인</p> <p>            var isDayTimeExist = false;</p> <p>            for(j=0;j<dayTimeList.length;j++){</p> <p>                var rowArray = dayTimeList[j];</p> <p>                var chkName = rowArray[0];</p> <p>                if(chkName==dayTimeStr){</p> <p>                    isDayTimeExist=true;</p> <p>                    //기존 합계 가져오기.</p> <p>                    var oldSum = rowArray[1];</p> <p>                    var newSum = (menuCount*menuAmt)+oldSum;</p> <p>                    </p> <p>                    dayTimeList[j] = new Array(dayTimeStr,newSum);</p> <p>                    </p> <p>                }</p> <p>            }</p> <p>            </p> <p>            if(!isDayTimeExist){</p> <p>                var newAddArray = new Array(dayTimeStr,menuCount*menuAmt);</p> <p>                dayTimeList.push(newAddArray);</p> <p>            }</p> <p>            </p> <p>        }</p> <p>        </p> <p>    }//end for</p> <p>    </p> <p>    // </p> <p>    var showSumAmt = 0;</p> <p>    var showStr = "";</p> <p>    for(j=0;j<allMenuList.length;j++){</p> <p>        var rowArray = allMenuList[j];</p> <p>        </p> <p>        var menuName = rowArray[0];</p> <p>        var menuCount = rowArray[1];</p> <p>        var menuAmt = rowArray[2];</p> <p>        </p> <p>        showSumAmt += menuCount*menuAmt;</p> <p>        </p> <p>        showStr += menuName + " " + menuCount+"*"+menuAmt+"="+menuCount*menuAmt+enter;</p> <p>        </p> <p>    }</p> <p>    </p> <p>    showStr += "합계 "+showSumAmt+enter+enter;</p> <p>    </p> <p>    </p> <p>    for(j=0;j<dayTimeList.length;j++){</p> <p>        var rowArray = dayTimeList[j];</p> <p>        </p> <p>        var dayTime = rowArray[0];</p> <p>        var datTimeSum = rowArray[1];</p> <p>        showStr += dayTime+" "+datTimeSum+enter;</p> <p>    }</p> <p>    </p> <p>    </p> <p>    </p> <p>    var totalSumObj = document.getElementById('totalSum');</p> <p>    totalSumObj.value=showStr;</p> <p>    </p> <p>    </p> <p>}</p> <p> <br></p> <p> <br></p> <p></script></p> <p> <br></p> <p><head></p> <p><style></p> <p> <br></p> <p>table{font-size: 20px; }</p> <p>button{font-size: 20px; margin:5px; }</p> <p>textarea{font-size: 20px; }</p> <p>td, th {</p> <p>  vertical-align : top;</p> <p>}</p> <p></style></p> <p></head></p> <p> <br></p> <p><table border="1"></p> <p>    <tr></p> <p>        <td width="500"></p> <p>            <pre></p> <p> <br></p> <p> 500</p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,500);'>아이스추가 500</button></p> <p> </p> <p> 1000</p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,1000);'>빵 1000</button></p> <p> </p> <p> 1500    </p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,1500);'>아메리카노</button> <button style="font-size:20px" type="button" onclick='addOrder(this,1500);'>콜라</button> <button style="font-size:20px" type="button" onclick='addOrder(this,1500);'>사이다</button> <button style="font-size:20px" type="button" onclick='addOrder(this,1500);'>훈제계란</button> <button style="font-size:20px" type="button" onclick='addOrder(this,1500);'>빵 1500</button></p> <p> </p> <p> 2000</p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>아이스 아메리카노</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>오렌지 쥬스</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>망고 쥬스</button></p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>핫쵸코</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>아이스티</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>현미녹차</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>매실차</button></p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>홍도라지 작두콩차</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>캐모마일</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2000);'>히비스커스</button></p> <p> </p> <p> 2500</p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,2500);'>카페라떼</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2500);'>생강차</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2500);'>유자차</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2500);'>한라봉차</button></p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,2500);'>쌍화차</button> <button style="font-size:20px" type="button" onclick='addOrder(this,2500);'>대추차</button></p> <p> </p> <p> 3500</p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>딸기라떼</button> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>초코라떼</button></p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>레몬에이드</button> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>자몽에이드</button> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>유자에이드</button></p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>아이스 카페라떼</button> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>아이스 생강차</button> </p> <p> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>아이스 유자차</button> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>아이스 한라봉차</button> <button style="font-size:20px" type="button" onclick='addOrder(this,3500);'>아이스 쌍화차</button></p> <p></pre></p> <p>        </td></p> <p>        <td ></p> <p><pre ></p> <p>                 <button type="button" onclick='addBottomList();'>현재 주문 밑에 추가.</button></p> <p>            <table id="orderList" border="1"></p> <p>                <tr></p> <p>                    <td width="200"></p> <p>                        품목</p> <p>                    </td></p> <p>                    <td width="100"></p> <p>                        단가</p> <p>                    </td></p> <p>                    <td width="100"></p> <p>                        수량</p> <p>                    </td></p> <p>                    <td width="100"></p> <p>                        금액</p> <p>                    </td></p> <p>                    <td width="150"></p> <p>                        감소 추가</p> <p>                    </td></p> <p>                    <td width="50"></p> <p>                        삭제</p> <p>                    </td></p> <p>                </tr></p> <p>            </table><table id="sumPrice" border="0"></p> <p>                <tr></p> <p>                    <td width="300"></p> <p>                        합계</p> <p>                    </td></p> <p>                    <td width="300"></p> <p>                        </p> <p>                    </td></p> <p>                    <td textAlign="right" ></p> <p>                <button style="font-size:20px" type="button" onclick='allDelete();'>전체삭제</button></p> <p>                    </td></p> <p>                </tr></p> <p>            </table></p> <p><br></p> <p>    <textarea id="orderedList" cols="50" rows="10" readonly ></p> <p>                </p> <p>            </textarea><button type="button" onclick='deleteBottomList();'>삭제</button></p> <p> <br></p> <p> <br></p> <p><button type="button" onclick='showAllOrder();'>총 주문 현황</button>    </p> <p><textarea id="totalSum" cols="50" rows="10" readonly ></p> <p>                </p> <p>            </textarea></p> <p> <br></p> <p></pre></p> <p>        </td></p> <p>        </p> <p>    </tr></p> <p></table></p>