Как получить данные из списка java с помощью js

Question

Я хочу получить данные из списка и получить всплывающее окно .. когда я использую getElementById, он получит только один идентификатор из другого ввода. не из списка, что я хочу .. так, я пришла идея использовать массив .. но я не знаю, как .. Я использую Java Play Framework

вот мой код ..

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() может возвращать любой из них.

Начиная с игры! поставляется с JQuery, вы могли бы использовать его вместо прямого JavaScript (это намного проще). Вкратце, вы прикрепляете тот же обработчик события «щелчок» ко всем ссылкам, и обработчик события клика знает, какой элемент был нажат.

Вот простой фрагмент кода, который демонстрирует это:

<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}