2012-01-16 5 views
3

이것은 내 첫 번째 게시물이며 PHP로 새롭다. PHP를 사용하여 POS 시스템을 구축하려고하지만 판매 모듈에 갇혀있다.html 테이블에 동적 행을 추가하는 방법은 무엇입니까?

문제는 바코드를 스캔 할 때 포커스가 설정된 텍스트 상자에 표시되며 항목 추가 버튼을 클릭하면이 단계가 다른 항목에 대해 반복 될 때 첫 번째 항목이 제거되고 바뀝니다. 그것은 최신 항목으로, 나는 내 100 %를 넣었지만 왜 이것이 일어나고 있는지 알아낼 수 없다. 그래서 나는이 포럼에서 PHP에 많은 훌륭한 개발자들이 있다는 것을 알고 있기 때문에 나를 도와 줘야한다. 여기

당신을 위해 내 코드입니다 :

<script type="text/javascript"> 
function setFocus(){ 
    document.getElementById("searchitem").focus(); 
} 

function change() 
{ 
    var searchitem = document.getElementById('searchitem'); 
    if(searchitem.value == '') 
    { 
     searchitem.style.background = 'orange'; 
    } 
    else 
    { 
     searchitem.style.background = ''; 
    } 
} 
</script> 



<?php $name = "Mehroz"; ?> 
    <SCRIPT language="javascript"> 
     /* setInterval("SANAjax();",5000); 
     $(function(){ 
      SANAjax = function(){ 
      $('#dataDisplay').prepend("HI This").fadeIn("slow"); 

      } 

     }) ; */ 



     function addRow(tableID) { 

      var table = document.getElementById(tableID); 

      var rowCount = table.rows.length; 
      var row = table.insertRow(rowCount); 

      var cell1 = row.insertCell(0); 
      var element1 = document.createElement("input"); 
      element1.type = "checkbox"; 
      cell1.appendChild(element1); 

      var cell2 = row.insertCell(1); 
      cell2.innerHTML = rowCount + 0; 

      var cell3 = row.insertCell(2); 
      var element2 = document.createElement("input"); 
      element2.type = "text"; 
      element2.value = '<?php echo $name;?>'; 
      element2.size = "15"; 
      cell3.appendChild(element2); 

      var cell4 = row.insertCell(3); 
      var element3 = document.createElement("input"); 
      element3.type = "text"; 
      element3.size = "25"; 
      element3.disabled = "disabled"; 
      cell4.appendChild(element3); 

      var cell5 = row.insertCell(4); 
      var element4 = document.createElement("input"); 
      element4.type = "text"; 
      element4.size = "3"; 
      element4.disabled = "disabled"; 
      cell5.appendChild(element4); 

      var cell6 = row.insertCell(5); 
      var element5 = document.createElement("input"); 
      element5.type = "text"; 
      element5.size = "3"; 
      element5.disabled = "disabled"; 
      cell6.appendChild(element5); 

      var cell7 = row.insertCell(6); 
      var element6 = document.createElement("input"); 
      element6.type = "text"; 
      element6.size = "5"; 
      cell7.appendChild(element6); 

      var cell8 = row.insertCell(7); 
      var element7 = document.createElement("input"); 
      element7.type = "text"; 
      element7.size = "5"; 
      cell8.appendChild(element7); 

      var cell9 = row.insertCell(8); 
      var element8 = document.createElement("input"); 
      element8.type = "text"; 
      element8.size = "10"; 
      cell9.appendChild(element8); 

      var cell10 = row.insertCell(9); 
      var element9 = document.createElement("input"); 
      element9.type = "submit"; 
      element9.value = "Update"; 
      cell10.appendChild(element9); 




     } 

     function deleteRow(tableID) { 
      try { 
      var table = document.getElementById(tableID); 
      var rowCount = table.rows.length; 

      for(var i=0; i<rowCount; i++) { 
       var row = table.rows[i]; 
       var chkbox = row.cells[0].childNodes[0]; 
       if(null != chkbox && true == chkbox.checked) { 
        table.deleteRow(i); 
        rowCount--; 
        i--; 
       } 

      } 
      }catch(e) { 
       alert(e); 
      } 
     } 


    </SCRIPT> 

<script src="menuscript.js" language="javascript" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="menustyle.css" media="screen, print" /> 

</head> 

<body onload="setFocus();change();"> 


<div class="left"> 
<form action="javascript:addRow('dataTable')" method="POST"> 
<input id="searchitem" name="add" type="text" onkeyup="change()" size="75" onclick="javascript:addRow('dataTable')"></input></td><td width="25%" colspan="2"> 
<input type="submit" value="New Item" name="search"> 
<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" /></form> 
</br> 
<table width="98%" id="dataTable"> 
<tr bgcolor="97c950"> 
<b> 
<td align="center" width="3%"></td> 
<td align="center" width="5%">S#</td> 
<td align="center" width="15%">Barcode</td> 
<td align="center" width="27%">Item Name</td> 
<td align="center" width="4%">Stock</td> 
<td align="center" width="4%">Qty</td> 
<td align="center" width="6%">Price</td> 
<td align="center" width="6%">Disc.Rs.</td> 
<!-- <td align="center" width="7%">Disc.%</td> --> 
<td align="center" width="10%">Total</td> 
<td align="center" width="23%"></td></tr> 

    <!-- <form action="javascript:addRow('dataTable')" method="POST"> 

    <INPUT type="text" name="add" value=""/> 
    <INPUT type="submit" value="Add Row" name="search" /> 
    </form> --> 
     <TR> 
      <TD><INPUT type="checkbox" name="chk" /></TD> 
      <TD> 1 </TD> 
      <TD> <INPUT type="textbox" size="15" /> </TD> 
      <TD> <INPUT type="textbox" size="25" disabled="disabled" /> </TD> 

            <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD> 
               <TD> <INPUT type="textbox" size="3" disabled="disabled"/> </TD> 
                  <TD> <INPUT type="textbox" size="5" /> </TD> 
               <TD> <INPUT type="textbox" size="5" /> </TD> 
            <TD> <INPUT type="textbox" size="10" /> </TD> 
           <TD> <INPUT type="submit" value="Update" /> </TD> 

     </TR> 

        </form> 


</table> 

</div> 
+0

PHP 부분은 어디에 있습니까? (나는 다른 것들이 "나는 PHP를 배우려고하는데 내 [튜토리얼 기반] 코드는 작동하지 않는다"라고 생각합니다.이 프로젝트의 배경에 관한 다른 정보가 유용 할 것입니다.) –

+1

코드를 작성하십시오. 조금 길어서 문제를 코드의 특정 부분으로 좁혀주십시오. –

+0

친애하는 모든 내 문제는 내가 할 수없는 MySQL에서 html 테이블에 행을 추가하고 싶습니다,이 점에서 저를 도와주세요 위의 코드를 무시하고, 당신이 말하는 코드를 따르는 것을 좋아합니다. – Sheharyar

답변

0

길고도 짧은 이야기, (난 당신이 실현하려 시도하고 정확하게 무엇을 이해하는 경우)이 코드입니다 : 이것은 긴

<html> 
<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
    $("#searchitem").focus().filter('input[value!=""]').addClass("orange"); 
}); 
</script> 
<style type="text/css"> 
    .orange 
    { 
     background-color: orange; 
    } 

    table#dataTable 
    { 
     empty-cells  : show; 
    } 

    table#dataTable th 
    { 
     text-align  : center; 
     background-color: #97C950; 
    } 

    .saved 
    { 
     background-color: green; 
    } 

</style> 
</head> 
<body> 
<form action="" method="POST" onSubmit=""> 
    <input id="searchitem" type="text" size="75" value="" > 
    <input type="submit" name="search" value="New Item" > 
    <input id="deleteRow" type="button" value="Delete Row" > 
</form> 

<table style="width:98%;" id="dataTable"> 
    <tr> 
     <th colspan="2" style="width:5%;">S#</th> 
     <th style="width:15%;">Barcode</th> 
     <th style="width:27%;">Item Name</th> 
     <th style="width:4%;">Stock</th> 
     <th style="width:4%;">Qty</th> 
     <th style="width:6%;">Price</th> 
     <th style="width:6%;">Disc.Rs.</th> 
     <th style="width:10%;">Total</th> 
    </tr> 
</table> 
<script type="text/javascript"> 
    $('#searchitem').change(function() 
    { 
     var t = $('#dataTable'); 
     t.append('<tr> \ 
      <td><input type="checkbox"></td> \ 
      <td>'+t.find('tr').length+'</td> \ 
      <td><input size="15" type="text" value="'+$(this).val()+'"></td> \ 
      <td><input size="25" type="text" value=""></td> \ 
      <td><input size="3" type="text" value=""></td> \ 
      <td><input size="3" type="text" value=""></td> \ 
      <td><input size="5" type="text" value=""></td> \ 
      <td><input size="10" type="text" value=""></td> \ 
      <td><input size="15" type="text" value=""></td> \ 
      <td><input type="button" value="Update" onClick="saveItem(event);"></td> \ 
     </tr>'); 
    }); 

    function saveItem(ev) 
    { 
     // here read all rows from that row, send them via AJAX to the server to be saved 
     // you get the current row by looking at ev.currentTarget, something like this in Firefox 
     var args = []; 
     $(ev.currentTarget).parents('tr:first').find('input[type="text"]').each(function(){ args.push($(this).val()); }); 
     $.post(
      'saveItem.php', 
      args, 
      function(){ $(ev.currentTarget).addClass('saved');} /* this is triggered onSucces */ 
     ); 
    } 
</script> 
</body> 
</html> 

이야기 :

  • 입력에 무언가를 입력 할 때 테이블에 새로운 행을 삽입해야합니다. # searchitem
  • 데이터베이스에 아직 저장하지 않으려면 먼저 다른 열 (수량, 가격 등)을 삽입하십시오.
  • 업데이트 버튼을 클릭하면 데이터베이스에 새 행이 삽입되고 everithing 인 경우 OK 버튼을 "녹색"색됩니다

이 코드는 당신에게 단서를 제공하고 올바른 방향으로 (이 개념의 증거처럼), 그래서 여기에 더 recomandations는 (제공하기 어려운 당신을 밀어 것입니다 Beacause은 나는 아직도 당신이 무엇을하려고하는지 정확하게 이해하지 못했다.) :
GLOBAL :

  • 할뿐 아니라 복사 /를 undertand에하려고하고, 자신의 필요

CSS에 대한 변경이 코드를 붙여 넣습니다

  • 사용 외부 스타일 시트
  • 세트의 고정 컬럼을위한 폭 테이블

자바 스크립트 : t 경우

  • 확인 그는 바코드가 존재하고, 행을 강조 표시하고, 보이는 영역이 보이지 않으면 그것을 표시 영역으로 밀어 넣습니다 (또는 "숨겨진 행이 5 개 더있는 상자 표시). name = barcode와 같은 입력을위한 이름을 지정할 수 있습니다.
  • args 배열에서 이러한 이름을 사용하여 명명 된 배열을 만듭니다.

희망이 도움이 될 것입니다.

관련 문제