テーブル外側のボディはHTMLのみ

このオプションをクリックすると、テーブルの外側の境界線のみを表示します。コードはextjsとhtmlを使って実装されています。 Border属性には、境界線を表示または非表示にする2つの値1と0があります。私はそれを外側の境界のために実装することができます。テーブル外側のボディはHTMLのみ

これはテーブルを生成する関数です。

generateHtmlTable = function (cols, rows, border) { 
//Create Table 
var tdWidth = 100/cols; 
var classN; 
//break-word only for IE 
//Set the classes for each type of table 
if(border==1){ 
    classN = "table1"; 
} else { 
    classN = "table0"; 
} 
var tempborder = "box"; 
var table = "<table bgColor=white border='"+border+"' width='100%' style=\"table-layout:auto word-wrap: break-word;\" class=\"" + classN +"\" cellpadding=0 cellspacing=0>"; 
for (var i = 0; i< parseInt(rows); i++) { 
    table += "<tr>"; 
    for (var j = 0; j < parseInt(cols); j++) { 
     table += "<td class=\"" + classN +"\" width='" + tdWidth +"%' valign=\"top\">&nbsp;</td>"; 
    } 
    table += "</tr>"; 
} 
table += "</table>"; 
return table;

}

これは、境界線を設定する機能です。

setOutBorder: function(edt){ 
     var rng = edt.getDoc().getSelection().anchorNode; 
     if (tables.validNode(rng)) { 
      tables.init(edt); 
      for(var i = 0; i < tbody.childNodes.length; i++){ 
       for(var j = 0; j < tbody.childNodes[i].childNodes.length; j++){ 
        tbody.childNodes[i].childNodes[j].className = "table0"; 
       } 
      } 
      table.className = "tableOut"; 
      table.border = 0; 
      //rng.select(); 
     } 
     tables.refresh(edt); 
    }

出典

2016-07-20 Anirudh Lakshmeesh

値に基づいて表の境界を非表示にしたい場合は、条件に基づいてjQueryを適用できます。

if(border)//is one 
{ 
$(<get table by class or id>).css({border:'1px solid black'}); 
} 
else 
{ 
$(<get table by class or id>).css({border:none}); 
}

function showHideBorder(border) 
 
{ 
 
    if(border == 1) 
 
    { 
 
     $('.isBordered').css({border:'1px solid'}); 
 
    } 
 
    else 
 
    { 
 
     $('.isBordered').css({border:'none'}); 
 
    } 
 
} 
 

 

 
$('#btn1').click(function(){ 
 
    showHideBorder(1); 
 
}); 
 

 
$('#btn2').click(function(){ 
 
    showHideBorder(0); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <table class='isBordered'> 
 
    <tr> 
 
     <td> 
 
     Hello 
 
     </td> 
 
     <td> 
 
     Anirudh Lakshmeesh 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     Hope! 
 
     </td> 
 
     <td> 
 
     It worked 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <button id='btn1'>Show</button> 
 
    <button id='btn2'>Hide</button> 
 
</body> 
 
</html>

出典

2016-07-20 10:40:22 jerry

ありがとうございました、しかし、唯一の国境外に表示する方法？ –

あなたはtd/trのテーブルではないことを意味しますか？ – jerry

はい、正確です。私はtdとtrのためのテーブル境界だけを必要としません。 –

テーブル外側のボディはHTMLのみ

答えて

関連する問題