jsを使用してjavaリストからデータを取り出す方法

Question

リストからデータを取得してポップアップに取得したいとします。getElementByIdを使用すると、別の入力から1つのIDのみを取得します。ない..私が欲しいのリストからそう、

..私は..配列を使用するためにアイデアを来ているが、私はフレームワーク

ここ

私のコードが再生どのように..私は、Javaを使用しているかわかりません

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では、2つの要素が同じid属性を持つことはありません。あなたのテーブルのすべての "td"要素はid = "staffId"なので、getElementById（）は任意のものを返すことができます。

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