테이블 셀을 선택하고 해당 셀을 팝업으로 업데이트하십시오.

Question

데이터베이스 내의 수많은 테이블 정보를 표시하는 큰 html/php 테이블이 있습니다.

현재 모든 행에 수정 버튼이 있고 클릭하면 해당 전체 행에 대한 정보를 업데이트 할 수있는 기능이 추가되었습니다.

내가 궁금하네요 것은 (내 표는 너무 크고, 너무 많은 정보가 있기 때문에) :

---

는 특정 셀을 선택하고 단지를 업데이트 할 수 있나요은? 가급적이면 자바 스크립트 팝업 창에서보다 쉽게 ​​사용할 수 있습니다.

---

살펴본 결과 지금까지 모두 그냥 전체 행을 업데이트 발견했습니다.

업데이트 : 난 당신이 셀을 더블 클릭, 그것이 foreach 루프 안에 때 표시됩니다 팝업창을 만들 수 있었다

. 지금 내가 겪고있는 문제는 팝업의 셀 내용을 편집 할 수있는 텍스트 상자를 보유 할 때 어떤 셀을 선택했는지에 따라 고유 한 팝업을 원한다는 것입니다.

내 foreach 루프에서 내 팝업은 다음과 같습니다 (이 순간에 하나의 셀에 대한 것입니다)

<td> 
    <div class="popup"> 

     <form> 
      <span class="title">Account_Name</span> <input name="eAccount_Name" id="eAccount_Name" type="text" value="<?php echo $row['Account_Name'];?>" class="pbox"/></P> 
      <input type="button" value="Edit" /></P> 
     </form> 
     <a href="#" class="close">Close</a> 

    </div> 

    </td> 

이 순간이 독특하지만 난 두 번 할 때 셀을 클릭하는 대신에서 1 팝업으로 나타나면 각 셀에 대한 모든 팝업이 표시됩니다. 나는 그들이 모두 "팝업"과 같은 클래스에 속해 있기 때문에 이것을 이해합니다. 이것에 대한 방법이 있습니까?

.overlay { 
    z-index: 5; 
    background: rgba(0, 0, 0, .50); 
    display: block; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
} 

.popup { 
    padding: 10px 10px 35px; 
    background: #F7F7F7; 
    z-index: 999; 
    display: none; 
    position:absolute; 
    margin-left:400px; 
    text-align:center; 
    border:2px solid blue; 
} 
.pbox { 
border:1px solid; 
} 

를 다음과 같이 내 자바 스크립트는 다음과 같습니다 :

내 CSS는 다음과 같습니다 난 아직 솔루션이 필요

<script> 
$(document).ready(function() { 
    $("#prods tr td").dblclick(function(event) { 
     $("body").append(''); $(".popup").show(); 
     $(".close").click(function(e) { 
      $(".popup, .overlay").hide(); 
     }); 
    }); 
}); 
</script> 

이 도움을 주시면 감사하겠습니다!

Answer 1

각 셀이 업데이트되었는지 kept가 추적 한 다음 편집 버튼을 클릭하여 수정 된 셀 색인에 대해 ajax 호출을 실행하는 자바 스크립트 배열을 만들 수 있습니다. 팝업 솔루션

: 그러나, 나는 각 행의 세포의 많은 사용자가 시간 만

UPDATE에 그 중 몇 가지를 업데이트 할 가능성이 당신이 경우 유효한 방법으로이 참조 당신은 td의 외부에서 일반적인 pop-up div를 만든 다음 js 메서드 $ ("# td"). dblclick (openEdit ([tdID]))로 팝업을 호출 할 수 있습니다.팝업 창을 닫은 다음 공개 기능에서 주어진 ID에서 td를 업데이트하십시오.

Answer 2

큰 데이터가있는 경우 쉽게 원하는대로 줄 수 있기 때문에 검도 그리드를 사용하면 더 좋습니다. 또한 http://docs.telerik.com/kendo-ui/tutorials/php/build-apps-with-kendo-ui-and-php

이 편집/업데이트 버튼에서 필드로 모든 열 이름을 가진 팝업을 줄 것이다 : 여기

는 링크입니다.

Answer 3

예 가능합니다. 각 셀에 클릭 이벤트를 등록하고 JS 함수를 호출하십시오. 이 함수에서는 텍스트 상자와 셀의 기존 값이있는 팝업을 표시합니다. 텍스트 상자에서 값을 편집하십시오. 하나의 제출 버튼을 유지하십시오. 제출 버튼에서 셀 값을 텍스트 상자의 값으로 업데이트하십시오. 모든 셀의 ID를 간단하게 만들어야합니다.

코드 예제 -

난 그냥두고 여기에 아이디어를 걸었습니다, 당신의 필요 조건에 따라 그것을 확장하십시오 - 이제 숨겨진

<td id="col58" onClick="editCellValue(this)">Cell Value</td> 

-

을 아래 가정하면 TDS 중 하나입니다 DIV로 셀 값 편집 -

<div id="cellValueEditorDiv" style="display: none;"> 
    <input type="text" id="txtCellEditor" /> 
    <input type="button" onClick="SetValue()" /> 
</div> 

이제 JavaScript 함수 -

var cellId; 
function editCellValue(cellElement) { 
    cellId = cellElement.id; 
    document.getElementById('txtCellEditor').value = cellElement.innerText; 
    document.getElementById('cellValueEditorDiv').style.display = 'block'; 
} 
function SetValue() { 
document.getElementById(cellId).innerText = document.getElementById('txtCellEditor').value; 
document.getElementById('cellValueEditorDiv').style.display = 'none'; 
} 

코드 용 편집기를 사용하지 않았습니다. 구문 오류가 있으면 수정하십시오.