Question

我想在单击该选项时仅显示表格外边框。代码使用extjs和html实现。 Border属性有2个值1和0，它们显示边框或隐藏它。我如何实现外边界。

这是生成表的功能。

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);
    }

Answer 1

如果你只想根据值显示隐藏表边框，可以使用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>

表外身只在HTML中

1 个答案: