僅在HTML中使用表格外殼

我想在單擊該選項時僅顯示錶格外邊框。代碼使用extjs和html實現。邊界屬性有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中使用表格外殼

回答

相關問題