I have the following code that is supposed to make the cells int the table resizeable, and the check boxes at the bottom of the page when unchecked delete the table cell. (the check boxes work but the table doesn't resize). This was previously reported as a duplicate post that is located here Uncaught TypeError: Cannot read property 'lastChild' of null
but its not. If anyone can help me with two problems I would be greatful. I am .Net developer and don't know much about Javascript so can you please be as detailed as possible.
- The table cells don't resize
- If you get them to resize, can you change the code to have a 4 cell table with top left, top right, bottom left and bottom right.
Im so lost I would appreciate any help. The working product is located here: https://jsfiddle.net/18k3umpp/3/
FYI: I also tried putting the javascript right before the tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link href="jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-ui.js"></script>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
}
table {
width: 100%;
height: 90%;
}
table td {
text-align: center;
border: 1px solid black;
}
#views-container {
height: 10%;
}
</style>
<script type="text/javascript">
/**
* Created by yako on 1/25/16.
*/
var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');
console.log(inputs);
console.log(tds);
var changeView = function () {
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checked) {
if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
} else {
if (tds[i].style.display === 'none') tds[i].style.display = '';
}
}
if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
else rows[0].style.display = '';
if (!inputs[2].checked) rows[1].style.display = 'none';
else rows[1].style.display = '';
};
changeView();
$(window).on("load resize", function () {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var v1Width = $("#v1").width()
$("#v1").resizable({
minWidth: 50,
maxWidth: windowWidth - 80,
maxHeight: windowHeight * (.83),
handles: "e, s"
}).on("resize", function () {
if (v1Width == $("#v1").width()) {
$("#v2").height(0)
}
v1Width = $("#v1").width()
});
$("#v2").resizable({
maxHeight: windowHeight * (.83),
handles: "s"
}).on("resize", function () {
$("#v1").height(0)
});
});
</script>
</head>
<body>
<table>
<tr>
<td id="v1">View 1</td>
<td id="v2">View 2</td>
</tr>
<tr>
<td colspan="2">View 3</td>
</tr>
</table>
<div id="views-container">
<input type="checkbox" checked="checked" onclick="changeView()">
<label>View 1</label>
<input type="checkbox" checked="checked" onclick="changeView()">
<label>View 2</label>
<input type="checkbox" checked="checked" onclick="changeView()">
<label>View 3</label>
</div>
</body>
</html>
