js를 사용하여 자바 목록에서 데이터를 검색하는 방법

Question

목록에서 데이터를 가져 와서 팝업으로 가져 오려고합니다. getElementById를 사용하면 다른 입력에서 하나의 ID 만 가져옵니다. 아니 .. 내가 원하는 목록에서 그렇게

.. 나는 .. 배열을 사용하는 아이디어를 왔어요하지만 난 프레임 워크

여기

내 코드가 플레이하는 방법 .. 내가 자바를 사용하고 모르는

display.html

여기

<script> 

function openModifySchedule(staffId) { 

if (!checkRequiredField()) { 
alert("There Is Error(s) In The Form. Please Fix It Before Proceed."); 
return; 
} 

var staffId = document.getElementById("staffId").value; 

if (staffId == "") { 
alert("Please Select Doctor Before Proceed"); 
return; 
} 

var url = "/DoctorSchedules/modifySchedulePopup?staffId=" + staffId; 

mywindow = window.open(url,"mywindow","location=no,resizable=1,width=700,height=650,menubar=no,center=yes"); 
mywindow.moveTo(420,100); 

} 
</script> 

<input type="hidden" id="staffId" name="staffDetails.staffId" value="${staffDetails?.staffId}"> 

<tbody> 
    #{list items:staffScheduleList , as:'stffSchedule'} 
     <tr id="list" align="center"> 
      <td></td> 
      <td id="scheduleDate">${stffSchedule.scheduleDate}</td> 
      <td id="staffId"><a onClick="openModifySchedule()" href="#">${stffSchedule.staffId}</a></td> 
      <td id="staffName">${stffSchedule.staffName}</td> 
      <td id="deptName">${stffSchedule.deptName}</td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td id="contactNo">${stffSchedule.contactNo}</td> 
     </tr> 
    #{/list} 
</tbody> 

컨트롤러의 기능이다 ..

display.java

public static void modifySchedulePopup(String staffId){ 

    StaffDetails staffDetails = StaffDetails.find("byStaffId", staffId).first(); 

    StaffSchedule staffSchedules = StaffSchedule.find("byStaffId", staffId).first(); 

    renderTemplate("DoctorSchedules/doctorScheduleModifyPopup.html", staffDetails,staffSchedules); 

} 

누군가가 설명 할 수 있기를 바랍니다.

Answer 1

DOM에서 두 요소가 동일한 id 특성을 가질 수 없습니다. 테이블의 모든 "td"요소는 id = "staffId"이므로 getElementById()는 임의의 값을 반환 할 수 있습니다.

Play! JQuery와 함께 제공됩니다. 스트레이트 자바 스크립트 대신 사용할 수 있습니다 (훨씬 쉽습니다). 간단히 말해, 모든 "링크"이벤트 핸들러를 모든 링크에 첨부하고 클릭 이벤트 핸들러는 클릭 된 요소를 알고 있습니다.

<script> 
    $(function() { 
    $(".staff-id").click(function() { // attach the click event handler 
     var staffId = $(this).text(); 
     alert(staffId); // open your new window here 
    }); 
    }); 
</script> 

#{list items:staffScheduleList, as:'stffSchedule'} 
    <tr id="list" align="center"> 
     <td></td> 
     <td>${stffSchedule.scheduleDate}</td> 
     <td><a class="staff-id" href="#">${stffSchedule.staffId}</a></td> 
     <td>${stffSchedule.staffName}</td> 
     <td>${stffSchedule.deptName}</td> 
     <td></td> 
     <td></td> 
     <td></td> 
     <td id="contactNo">${stffSchedule.contactNo}</td> 
    </tr> 
#{/list}