테이블 행을 점프하는 방법?

Question

나는 주간 트랜잭션 목록을 포함 할 웹 페이지에서 작업하고 있습니다.

내가 원하는 방식은 거래 목록을 작성하고 클릭하면 그 주에 대한 자세한 정보가 바로 아래에 표시됩니다.

이 나는 ​​테이블과 같이 제시 싶지만 자세한 정보는 다음과 같이 뛰어하려면 :

그래서 자세한 정보는 다음과 같이 표시됩니다 세 번째 행을 클릭합니다. 내가 가지고있는 구체적인 문제는 세부적인 행을 점프하는 것입니다.

어떤 아이디어라도 대단히 감사하겠습니다.

Answer 1

당신은 TR의 Colspan과 함께 TD의 다른 테이블을 사용할 수 있다고 생각합니다. CSS를 사용하여 테두리를 만들 수 있습니다. 예를 들어

:

<table style="border:1px solid #000; border-collapse:collapse;"> 
    .. 
    <tr> 
      <Td>Info 2 1 </Td> 
      <Td>Info 2 2 </Td> 
      <Td>Info 2 3 </Td> 
      <Td>Info 2 4 </Td> 
    </tr> 
    <tr> 
      <td style="border:0px solid #FFF;"> 
       <table style="border:0 0 0 50px; border:1px solid #000; border-collapse: collapse;"> 
        <tr> 
          <td>Detail title 1</td> 
          <td>Detail title 2</td> 
          <td>Detail title 3</td> 
        </tr> 
       </table> 
      </td> 
    </tr> 
    <tr> 
      <td>Info 2 1 </td> 
      <td>Info 2 2 </td> 
      <td>Info 2 3 </td> 
      <td>Info 2 4 </td> 
    </tr> 
    .. 
<table> 

, 당신의 jQuery "후"는 COMAND를 사용할 수있는 동적으로 내부 테이블을 만들 수 있습니다. 예 :

$('#TR_Selected').after('<tr><td colspan="4"><table> ...</table></td></tr>');