나는 데이터베이스 에서처럼 동적으로 내 HTML 테이블을 구축 자바 스크립트

Question

와 체크 박스 marqued HTML 테이블의 한 행 삭제 :

for (i = 0; i < nomCols.length; i++) { 
    retour.append(("<td bgcolor=#0066CC>") + nomCols[i] + "</td>"); 

} 
retour.append("</tr>"); 

retour.append("<tr>"); 

try { 

    s = HibernateUtil.currentSession(); 
    tx = s.beginTransaction(); 
    Query query = s.createQuery(HQL_QUERY); 

    for (Iterator it = query.iterate(); it.hasNext();) { 
     if (it.hasNext()) { 
      Dailytimesheet object = (Dailytimesheet) it.next(); 
      retour.append("<td><input type=checkbox name=cb id=cb /> </td>"); 
      retour.append("<td>" + object.getTrackingDate() + "</td>"); 
      retour.append("<td>" + object.getActivity() + "</td>"); 
      retour.append("<td>" + object.getProjectCode() + "</td>"); 
      retour.append("<td>" + object.getWAName() + "</td>"); 
      retour.append("<td>" + object.getTaskCode() + "</td>"); 
      retour.append("<td>" + object.getTimeSpent() + "</td>"); 
      retour.append("<td>" + object.getPercentTaskComplete() + "</td>"); 
     } 
     retour.append("</tr>"); 


    } 

    retour.append("</table>"); 
    tx.commit(); 


} catch (HibernateException e) { 
    retour.append("</table><H1>ERREUR:</H1>" + e.getMessage()); 
    e.printStackTrace(); 
} 

return retour; 
} 

그래서 난 모든 확인란이 동일한 ID를 갖는하고자합니다. 내 테이블 마녀에서 한 행을 삭제하려고 할 때 확인란을 선택했는데 문제가 발견되었습니다. 이 같은 간단한 자바 스크립트를 사용하여 스피 :

function DeleteARow() { 
    //var Rows = document.getElementById('sheet').getElementsByTagName('tr'); 
    //var RowsCount = Rows.length; 
    //alert('Your table has ' + RowsCount + ' rows.'); 
    if (document.getElementById('cb').checked == true) { 

     document.getElementById('cb').parentNode('td').parentNode('tr').remove(); 

    } 
} 

그것은 approperly 만 첫 번째 행 작업 ID 'CB'를 가지고 있지 않습니다.

많은 도움에 감사드립니다.

Answer 1

ID의 요점은 하나만있을 수 있다는 것입니다. ID 같은 요소를 여러 개 가질 수는 없습니다.

getElementByID은 ID가있는 첫 번째 요소 만 반환합니다.

대신 CSS 클래스를 사용하는 것이 좋습니다.

: 당신이 jQuery 같은 것을 배울 수있는 시간을하려면

var j, elements = document.getElementsByTagName("INPUT"); 
for (j = 0;j < elements.length;j += 1) { 
    if (elements[j].className === 'cb' && elements[j].checked === true) { 
     // elements[j] is your checkbox 
    } 
} 

, 당신은 쉽게이 전체 작업을 할 수 있습니다 : 여기

는 class="cb" 가지고있는 체크 박스를 통해 당신이 루프 할 수있는 방법입니다 $ ('.cb : checked'). parent(). parent(). remove();

편집 :

$('.cb:checked').closest('tr').remove();