Iframe 강조 표시된 테이블 행

Question

iframe onclick에서 선택한 테이블 행을 강조 표시하려고합니다. 상위 소스에 표가 있으며 강조 표시가 작동하지만 이제는 동일한 효과가있는 iframe 표를 타겟팅하고 싶습니다. 여기 내 생각은 있지만이를 달성하기위한 코드가 문제입니다. - div1에서 iframe을 감싸고 div1 내에서 다른 슬림 div2를 강조 표시하여 div1 내에서 클릭하면 div2는 마우스 (선택된 행)의 Y 좌표를 취합니다. iframe에서 선택된 행 중 하나를 달성 할

• 마우스 클릭, 화살표 키를 입력 키 또는 탭 키
  내가 선택한 행은 iframe에 강조 얻을 어떻게 여기

내 현재 코드

HTML을

<div> 
<table id="myTable" class="dataTable"> 
    <thead 
    <tr> 
     <th>First</th> 
     <th>Last</th> 
     <th>Address</th> 
     <th>City</th> 
     <th>State</th> 
     <th>Zip</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="odd-row"> 
     <td>James</td> 
     <td>Smith</td> 
     <td>222 Oak St</td> 
     <td>Madison</td> 
     <td>WI</td> 
     <td>54913</td> 
    </tr> 
    <tr class="even-row"> 
     <td>Michelle</td> 
     <td>Johnson</td> 
     <td>333 Maple Ave</td> 
     <td>Cedar Rapids</td> 
     <td>IA</td> 
     <td>52227</td> 
    </tr> 

    </tbody> 
    <iframe src="https://ethercalc.org/rowhighlight" style="border:6px solid grey;" height=400px width=90%></iframe> 
    </div> 
</table> 

JQuery와

$('tr').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}).on('click', function() { 
    $('tr').not(this).removeClass('click-row') 
    $(this).toggleClass('click-row'); 
}); 

CSS

body { 
    font-family: verdana; 
} 
table { 
    border-collapse: collapse; 
} 
th { 
    text-align: left; 
} 
tr.even-row { 
    background-color: #EAEAFF; 
} 
tr.odd-row { 
    background-color: #FAFAFA; 
} 
tr.hover { 
    background-color: #FFFFCC; 
} 
tr.click-row { 
    background-color: green; 
} 

https://jsfiddle.net/otente/vwded5Lz/12/

Answer 1

해서는 안 방금 장 마우스를 올리면 강조 표시됩니까?

$(this).addClass('highlight');

그리고 당신은 iframe에 소스 코드를 제어하거나 다른 도메인에있는 마

<tr class ="beautiful table".../> 

and 

$(.'beautiful table').hover