I am trying to override a bootstrap class using JavaScript. The problem is that value of display is changed by the Javascript code but the HTML rows aren't displayed. If I use !important in the style block in custom.css bootstrap is overridden and the JavaScript assignment is still the HTML rows aren't displayed....can anyone tell me whats wrong here. I did try using an ID then chaining the elements (#id.class) that didn't work either. (the code works fine without bootstrap)
custom css
body {
margin-top:30px;
}
.hidden
{
display: none;
}
HTML
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script> src="js/bootstrap.min.js"</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<table class="hidden table table-striped table-border">
<tbody>
<tr class="hidden">
<td>List ............</td>
</tr>
<tr class="hidden active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hidden">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hidden">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hidden">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hidden">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hidden">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
</body>
<script type="text/javascript">
var count=4;
var activerows=document.getElementsByClassName("hidden");
if(count <= activerows.length){
for (var i=0; i<count; i++)
{
activerows[i].style.display="block";
}
}else
{
for (var i=0; i<activerows.length; i++)
{
// activerows[i].style.display='block';
}
}
</script>
</html>
If Bootstrap is the main culprit then don't use its class and simply use your custom class hideme or something and then override it using Javascript like I have done in this snippet below:
var count = 4;
var activerows = document.getElementsByClassName("hideme"),
tablehasClass = document.getElementById("table").classList;
if (count <= activerows.length) {
tablehasClass.remove("hideme");
for (var i = 0; i < count; i++) {
activerows[i].style.display = "table-row";
}
} else {
for (var i = 0; i < activerows.length; i++) {
// activerows[i].style.display='';
}
}
body {
margin-top: 30px;
}
.hideme {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8">
<table id="table" class="hideme table table-striped table-border">
<tbody>
<tr class="hideme">
<td>List ............</td>
</tr>
<tr class="hideme active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hideme">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hideme">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hideme">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hideme">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hideme">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
</body>
</html>
table is very keen of its elements so never use display: block us display: table-row for tr, display: table-cell for td and similarly display: table for table
Instead of setting the style from javascript you should remove the class from the element.
Alternatively you can set the cssText of the element style to display:block !important
var count=4;
var activerows=document.getElementsByClassName("hidden");
if(count <= activerows.length){
for (var i=0; i<count; i++)
{
activerows[i].style.cssText = 'display:block !important';
}
}else
{
for (var i=0; i<activerows.length; i++)
{
// activerows[i].style.display='block';
}
}
body {
margin-top:30px;
}
.hidden
{
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-8">
<table class="hidden table table-striped table-border">
<tbody>
<tr class="hidden">
<td>List ............</td>
</tr>
<tr class="hidden active">
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr class="hidden">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr class="hidden">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr class="hidden">
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr class="hidden">
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr class="hidden">
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="well col-md-8">
<p>Test Messages.........</p>
</div>
</div>
Please change this row
activerows[i].style.display="block";
with
$(activerows[i]).attr("style", "display: block !important");
or
$(activerows[i]).removeClass('hidden');
You need !important again to override the previous !important.
https://jsfiddle.net/nqtafyg2/6/
Related
In my HTML document there are two tables having 4 and 1 rows respectively. I want to put the row of the second table on the top of last row of the first table. I tried using z-index but the overlapping is not proper
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="table1">
<tr bgcolor="lightgreen">
<th>NAME</th>
<th>AGE</th>
<th>DESIGNATION</th>
</tr>
<tr bgcolor="limegreen">
<td>John</td>
<td>25</td>
<td>Front-End Developer</td>
<tr>
<tr bgcolor="lime">
<td>Angelov</td>
<td>24</td>
<td>Back-End Developer</td>
<tr>
<tr bgcolor="limegreen">
<td>Rishi</td>
<td>25</td>
<td>Full-Stack Developer</td>
<tr>
<tr bgcolor="lime">
<td>Amy</td>
<td>20</td>
<td>Web Designer</td>
<tr>
</table>
<br>
<br>
<br>
<table id="table2">
<tr bgcolor="lime">
<td>Jackson</td>
<td>20</td>
<td>Database Administrator</td>
<tr>
</table>
</body>
</html>
As a quick example you could position both of them absolutely so the second table sits on top of the first one ? You may need to add more css styles to make the table design consistent
#table1 {
position: absolute;
width: 253px;
}
#table2 {
position: absolute;
width: 253px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table id="table1">
<tr bgcolor="lightgreen">
<th>NAME</th>
<th>AGE</th>
<th>DESIGNATION</th>
</tr>
<tr bgcolor="limegreen">
<td>John</td>
<td>25</td>
<td>Front-End Developer</td>
<tr>
<tr bgcolor="lime">
<td>Angelov</td>
<td>24</td>
<td>Back-End Developer</td>
<tr>
<tr bgcolor="limegreen">
<td>Rishi</td>
<td>25</td>
<td>Full-Stack Developer</td>
<tr>
<tr bgcolor="lime">
<td>Amy</td>
<td>20</td>
<td>Web Designer</td>
<tr>
</table>
<table id="table2">
<tr bgcolor="lightgreen">
<th>NAME</th>
<th>AGE</th>
<th>DESIGNATION</th>
</tr>
<tr bgcolor="limegreen">
<td>Jackson</td>
<td>20</td>
<td>Database Administrator</td>
<tr>
</table>
</body>
</html>
Trying to put Jqueryui Sortable interaction into a Bootstrap table so people can move rows around to compare them.
So is the Jqueryui not compatable with Bootstrap? Can I not put table rows in lists? Like what is the problem here? Im not understanding the issue cause none of the rows are sortable/moving.
HTML and JS-
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="./Bombers Hockey_files/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="./Bombers Hockey_files/bootstrap.min.js.download" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link href="./Bombers Hockey_files/hockey.css" rel="stylesheet" type="text/css">
<script src="./Bombers Hockey_files/jquery.min.js.download"></script>
<script src="./Bombers Hockey_files/popper.min.js.download"></script>
<script>
$( function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
} );
</script>
<table class="table table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>GP</th>
<th>Goals</th>
<th>Assists</th>
<th>Points</th>
<th>Penalties</th>
</tr>
</thead>
<tbody>
<ul id="sortable">
<li class="ui-state-default">
<tr>
<td>Adam</td>
<td>12</td>
<td>2</td>
<td>0</td>
<td>2</td>
<td>2</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Braden</td>
<td>8</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Caleb</td>
<td>10</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>6</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>John</td>
<td>8</td>
<td>2</td>
<td>3</td>
<td>5</td>
<td>8</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Ryan</td>
<td>8</td>
<td>7</td>
<td>0</td>
<td>7</td>
<td>26</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Kyle</td>
<td>10</td>
<td>3</td>
<td>6</td>
<td>9</td>
<td>8</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Sean</td>
<td>8</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>8</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Seth</td>
<td>11</td>
<td>4</td>
<td>1</td>
<td>5</td>
<td>47</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Kyle Z</td>
<td>8</td>
<td>2</td>
<td>0</td>
<td>2</td>
<td>0</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Gary</td>
<td>10</td>
<td>7</td>
<td>3</td>
<td>10</td>
<td>6</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Mark</td>
<td>12</td>
<td>6</td>
<td>5</td>
<td>11</td>
<td>30</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Mike</td>
<td>12</td>
<td>1</td>
<td>6</td>
<td>7</td>
<td>0</td>
</tr>
</li>
<li class="ui-state-default">
<tr>
<td>Tim</td>
<td>1</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>2</td>
</tr>
</li>
</ul>
</tbody></table>
CSS -
#sortable {
list-style-type: none; margin: 0; padding: 0; width: 60%;
}
#sortable li {
margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px;
}
#sortable li span {
position: absolute; margin-left: -1.3em;
}
Try re-arranging your link and script tags and see if that does it. It could be case of something overriding something else:
<link rel="stylesheet" href="./Bombers Hockey_files/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="./Bombers Hockey_files/hockey.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="./Bombers Hockey_files/bootstrap.min.js.download" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="./Bombers Hockey_files/jquery.min.js.download"></script>
<script src="./Bombers Hockey_files/popper.min.js.download"></script>
The use of <ul><li> tags inside <tbody> are invalid and unnecessary as <tr><td> elements are basically lists. Just making the <tbody> of your table sortable works just fine.
https://jsfiddle.net/66mj031n/
I am trying to click on a html row and get all the elements but i can't figure it out,below are my HTML Land java script codes, Help!
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);" onmouseout="ChangeColor(this, false);" onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
And my javascript codes
<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
if (highLight) {
tableRow.style.backgroundColor = '#dcfac9';
} else {
tableRow.style.backgroundColor = 'white';
}
}
</script>
You can select all td of selected row and get the innerHTML of each td.
function ChangeColor(tableRow, highLight)
{
if (highLight)
{
tableRow.style.backgroundColor = '#dcfac9';
}
else
{
tableRow.style.backgroundColor = 'white';
}
}
function readvalues(tableRow){
var columns=tableRow.querySelectorAll("td");
for(var i=0;i<columns.length;i++)
console.log('Column '+i+': '+columns[i].innerHTML );
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3"onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="readvalues(this);">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
You can do the same thing with pure CSS.
Below is an example, where I have used hover class for true
tr{
background: grey;
}
tr:hover{
background: white;
}
.hover:hover{
background:#dcfac9;
}
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1" class="hover"
onclick="readvalues();">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2"
onclick="readvalues();">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3" class="hover"
onclick="readvalues();">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
If you are using jQuery, you can try something like this. Even more, you can use css instead of changing row colour in javascript.
$('#example tr').click(function() {
var values = $(this).find('td').map(function() {
return $(this).text();
}).get();
console.log(values);
});
table tr:hover {
background-color: #dcfac9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" width="100%" border="1" cellpadding="0" cellspacing="0">
<tr id="1">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr id="2">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr id="3">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
In case if you want to read current 'tr' or row element's data on click, you can try this using pure javascript:
<table id="example"width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<script language="javascript">
function readValues(evt){
var elem = evt.target.parentElement;
console.log(elem); //elem contains current tr element's data
}
var elem = document.querySelectorAll("#example tr");
for(var i=0;i<elem.length;i++){
bindMe(elem[i]);
}
function bindMe(elem){
elem.addEventListener("click", function(evt){
readValues(evt);
});
}
</script>
jsfiddle: https://jsfiddle.net/rxvjmvzh/
I want to use Table class as can be easily implemented in JavaScript as shown in the following code snippet. After having declared the object, we can instantiate it by using the new operator and use its properties and methods.But my code is not working. Please have a look.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>:Functions as Variables:</title>
<style>
table {margin-bottom:15px;}
td {padding:10px; text-align:center; border:1px solid #cecece;}
</style>
<script src="js/jquery-1.11.3.min.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
</table>
<script>
function table(row,column) {
this.row = row;
this.column = column;
getCountCell = function(){
return this.rows * this.column;
}
}
var c = new table(3,5);
var t = c.getCountCell();
console.log(t);
</script>
</body>
</html>
You can try this code
(function(){
var rows;
var columns;
this.table = function table(row,column) {
this.rows = row;
this.columns = column;
}
table.prototype.getCountCell = function() {
return this.rows * this.columns;
}
})();
var c = new table(3,5);
var t = c.getCountCell();
console.log(t);
Here is the details about JavaScript prototype constructor
spelling mistakes is a row not rows and apply this in front of this.getCountCell
function table(row,column) {
this.row = row;
this.column = column;
this.getCountCell = function(){
return this.row * this.column;
}
}
var c = new table(3,5);
var t = c.getCountCell();
console.log(t);
table {margin-bottom:15px;}
td {padding:10px; text-align:center; border:1px solid #cecece;}
<table cellpadding="0" cellspacing="0" width="100%" border="0">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
</tr>
</table>
I am trying to create a 2x2 grid of tables in HTML, where each table is independently collapsible. I can't seem to figure out a proper solution. For example, the version below somewhat works, but unfortunately when the R1C1 table is hidden, the row 2 tables become joined with the first row.
<!DOCTYPE html>
<!-- Attempt at a 2x2 grid of tables, each independently collapsible
Based on following web pages (among others):
- http://www.delphifaq.com/faq/javascript/f1030.shtml
- http://www.w3schools.com/css/css_table.asp
-->
<html>
<head>
<title>2x2 table grid</title>
<style>
table, th, td
{
border-collapse:collapse;
border:1px solid black;
width=50%
}
</style>
<script language="JavaScript" type="text/javascript">
function setDivStyle(table, style) {
// Set the display style
var tbl = document.getElementById(table);
tbl.style.display = style;
console.log(table + " display style set to " + style)
}
</script>
</head>
<body>
<div id="r1">
<h2>Row 1</h2>
<div id="r1-controls">
<a id="r1c1-hide" href="javascript:setDivStyle('r1c1', 'none')">Hide R1C1</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c1', 'inline')">Expand R1C1</a>
<a id="r1c2-hide" href="javascript:setDivStyle('r1c2', 'none')">Hide R1C2</a>
<a id="r1c2-show" href="javascript:setDivStyle('r1c2', 'inline')">Expand R1C2</a>
<br>
</div>
<table id="r1c1" style="display: inline; float: left">
<tr>
<th>R1C1a</th>
<th>R1C1b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r1c2" style="display: block; float: none">
<tr>
<th>R1C2a</th>
<th>R1C2b</th>
<th>R1C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
<div id="r2">
<h2>Row 2</h2>
<div id="r2-controls">
<a id="r2c1-hide" href="javascript:setDivStyle('r2c1', 'none')">Hide R2C1</a>
<a id="r2c1-show" href="javascript:setDivStyle('r2c1', 'inline')">Expand R2C1</a>
<a id="r2c2-hide" href="javascript:setDivStyle('r2c2', 'none')">Hide R2C2</a>
<a id="r2c2-show" href="javascript:setDivStyle('r2c2', 'inline')">Expand R2C2</a>
<br>
</div>
<table id="r2c1" style="display: inline; float: left">
<tr>
<th>R2C1a</th>
<th>R2C1b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
<table id="r2c2" style="display: block; float: none">
<tr>
<th>R2C2a</th>
<th>R2C2b</th>
<th>R2C1c</th>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
</table>
</div>
</body>
</html>
I've had problems similar to this before. Its the float:left that is causing Row 2 to move up when R1C2 is hidden. I recommend creating another function that will toggle float:left when you hide R1C2 like so:
function setFloat(element, style) {
var el = document.getElementById(element);
el .style.float = style;
console.log(element + " float style set to " + style)
}
and calling it: javascript:setDivStyle('r1c2', 'none');setFloat('r1c1','none');