빈 테이블의 테두리를 숨기는 방법 (HTML, Javascript)

Question

HTML 테이블을 화면에서 완전히 제거하고 나중에 행을 추가 할 수 있습니다. 나는 테이블 (기본적으로, 그것은 "에 테이블의 내부 HTML을 설정")에서 모든 행을 제거하려면 다음 코드를 가지고 : 그러나

function removeAllRows() { 
    table = document.getElementById("myTable") 
    table.innerHTML = "" 
} 

,이 함수가 호출되고, 테이블은 완전히 제거되지 않습니다 ... 테이블에 작은 얼룩이 있습니다. 테이블 요소의 1 픽셀 테두리와 관련이 있다고 생각합니다.

이 기능을 수정하여 화면에서 테이블을 완전히 제거하고 싶습니다. 기본적으로 테이블이 비어있을 때 테이블 경계를 숨길 수 있습니다.

이 작업을 수행하기 위해 스타일 블록에 넣을 수있는 것이 있습니까? 전체 테이블이 더 세포가없는 경우

table, td { 
    border: 1px solid black; 
    border-collapse: separate; 
    empty-cells: hide; 
} 

empty-cells: hide; 전체 테이블의 테두리를 빈 셀의 테두리를 숨길 수 있지만하지 않습니다

는 지금, 내 스타일 블록처럼 보인다.

빈 테이블의 테두리를 숨길 수있는 방법이 있습니까?

fiddle

Answer 1

는 프로그래밍 방식의 경계를 변경할 수 있습니다

function removeAllRows() { 
    var table = document.getElementById("myTable") 
    // Checking that the table element exists before setting it to hidden to avoid nullreference exceptions. 
    if(!!table){table.hidden = true;} 
} 

Answer 2

당신이 할 수있는 테이블을 ... 숨기려면. 의 addRow() 메소드에 다음 removeAllRows이 선()

table.style.border="0px"; 

추가 다시 테두리를 추가 :

table.style.border="1px solid black"; 

Answer 3

당신은 당신이 테이블에 테두리 클래스를 추가 할 수 없습니다

function removeAllRows() { 
    table = document.getElementById("myTable") 
    table.innerHTML = "" 
    table.className = 'no-border'; 
} 

그리고 CSS 파일 :

.no-border { 
    border: none; 
} 

Answer 4

CSS만으로는 해결할 수 없었습니다. 는하지만 당신은 하나의 테이블을 숨기거나 단지

if (table.children.length) { 
    table.classList.toggle('border') // whatever should replace default 
}