空のテーブルの境界を非表示にする方法（HTML、Javascript）

Question

HTMLテーブルを画面から完全に削除し、後で行を追加することができます。この関数が呼び出されたときに、テーブルが完全に除去されず、しかし

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

：私はテーブルからすべての行を削除するために、次のコードを（基本的に、それは「」にテーブルの内側のHTMLを設定する）持っています...テーブルに小さな斑点があります。これは、テーブル要素の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（）メソッドに続いて

table.style.border="0px"; 

）（removeAllRowsにこの行を追加します。バックの境界線を追加します。

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 
}