YugabyteDB 테이블의 태블릿용 북마클릿

이 블로그에서 내가 YugabyteDB 콘솔에서 찍은 스크린샷의 열이 적을 수 있음을 보셨을 것입니다. 예:
이것:

이것보다는:


명확성을 위해 블로그 게시물에 의미가 없는 열을 제거합니다. 이것은 매우 낮은 이미지 해상도에 도움이 됩니다. 나는 또한 관련 정보만 큰 글꼴로 표시하는 것이 더 나은 프레젠테이션에 사용합니다.

일부 CSS로 간단하게 수행하고 이 게시물에서 내가 사용하는 북마클릿을 공유합니다. 예를 들어 위의 경우 다음과 같이 북마크를 만드십시오.

javascript:(function()%7Bdocument.querySelectorAll('.table-striped%3Anth-child(4)%20tr%3E*%3Anth-child(n%2B3)%3Anth-child(-n%2B6)').forEach(el%20%3D%3E%20el.style.display%20%3D%20'none')%3Bdocument.getElementsByClassName(%22yb-main%20container-fluid%22)%5B0%5D.style.marginLeft%3D%2288px%22%3Bdocument.getElementsByClassName(%22sidebar-wrapper%22)%5B0%5D.style.width%3D%2299px%22%7D)()

마스터 웹 콘솔의 태블릿 목록인 3 번째 테이블에서 6 ~ 4 열을 제거합니다.

다음과 같이 합니다.

document.querySelectorAll(
    '.table-striped:nth-child(4) tr>*:nth-child(n+3):nth-child(-n+6)'
    ).forEach(el => el.style
    .display = 'none');
document.getElementsByClassName("yb-main container-fluid")[0].style.marginLeft="88px";
document.getElementsByClassName("sidebar-wrapper")[0].style.width="99px";

요컨대:

.table-striped:nth-child(4) : 클래스의 4번째 테이블table-striped

tr>* : tr 아래의 첫 번째 태그 (th 또는 td )

nth-child(n+3) :3번째부터

:nth-child(-n+6) : 6번째로

마지막으로 사이드바 메뉴의 크기를 조정합니다

.

https://mrcoles.com/bookmarklet/로 책갈피로 변형했습니다.