ProgramingTip

부트 유효성 테이블 행을 클릭 가능하게 만들려면 어떻게하면?

bestdevel 2020. 11. 13. 23:49
반응형

부트 유효성 테이블 행을 클릭 가능하게 만들려면 어떻게하면?


내가 직접 해킹 할 수 있고 부트 가능한 기능이 있습니다.


jQuery를 사용하는 것은 매우 사소합니다. v2.0은 table모든 테이블 에서 클래스를 사용합니다 .

$('.table > tbody > tr').click(function() {
    // row was clicked
});

기능 현관을 부트이 스트랩에 추가 하는 자바 펼쳐 플러그인 이 있습니다.

때 포함 rowlink.js할 수있다 :

<table data-link="row">
  <tr><td><a href="foo.html">Foo</a></td><td>This is Foo</td></tr>
  <tr><td><a href="bar.html">Bar</a></td><td>Bar is good</td></tr>
</table>

첫 번째 열 대신 전체 행을 클릭 할 수 있습니다.


이 코드는 data-href속성이 모든 부트 테이블 행을 클릭 가능한 요소로 변환합니다.

참고 : data-href속성은 유효한 tr속성 (HTML5)이지만 tr 요소의 속성은 말할 수 href있습니다.

$(function(){
    $('.table tr[data-href]').each(function(){
        $(this).css('cursor','pointer').hover(
            function(){ 
                $(this).addClass('active'); 
            },  
            function(){ 
                $(this).removeClass('active'); 
            }).click( function(){ 
                document.location = $(this).attr('data-href'); 
            }
        );
    });
});

모달 창으로 내 예를 보여 드리겠습니다 ... 모달을 만들고 ID를 부여한 다음 테이블에 tr 섹션이 있고 아래에 첫 번째 줄을하십시오 광고 (첫 번째 행에이

<tr onclick="input" data-toggle="modal" href="#the name for my modal windows" >
 <td><label>Some value here</label></td>
</tr>                                                                                                                                                                                   

<tr height="70" onclick="location.href='<%=site_adres2 & urun_adres%>'"
    style="cursor:pointer;">

테이블 행을 클릭 할 때 함수를 첨부 할 수 있습니다.

var table = document.getElementById("tableId");
var rows = table.getElementsByTagName("tr");
for (i = 0; i < rows.length; i++) {
    rows[i].onclick = functioname(); //call the function like this
}

부트 가능한 CSS를 사용하여 이런 방식으로 사용할 수 있습니다. 이미 행에 할당 된 경우 활성 클래스를 제거하고 현재 행에 다시 할당하십시오.

    $(".table tr").each(function () {
        $(this).attr("class", "");
    });
    $(this).attr("class", "active");

참고 URL : https://stackoverflow.com/questions/10002704/how-do-i-make-bootstrap-table-rows-clickable

반응형