Javascript to hide HTML lines containing an empty cell
2,244 views
Skip to first unread message
whatever
Jan 19, 2011, 7:31:40 AM1/19/11
to TiddlyWiki
Hi!
I'd like to hide the rows in an HTML table which contain an empty
cell. This has to do with a plugin which generates various tables, so
the user only lists the data as paramaters. The plugin works nicely,
but I'd like to pimp it up. So, beside hiding the row in which a cell
is empty (because the user didn't enter data), I'd also like to hide
the section in which all rows but the subtitle are empty. Also, if no
data has been entered, then a message should be rendered instead of
the table. This is a simplified example where only the Title,
Subtitle1 and test2 line should be visible. Is it as simple as I think
it is or am I going about it the wrong way?
<html>
<script>
if((document.getElementTagName('td').innerHTML === '')) { //If a cell
is empty
document.getElementTagName('tr').style.display = 'none'; //Remove the
line
}
if((document.getElementTagName('tr').length === 1)) { //If only the
subtitle is visible
document.getElementTagName('tbody').style.display = 'none'; //Remove
the section
}
if((document.getElementTagName('tbody').length === 0)) { //If only the
title is visible
document.getElementTagName('table').style.display = 'none'; //Remove
the table
return "<b>No information</b>"; //Display the message instead
}
</script>
<table border="1">
<tr><td colspan="2">Title</td></tr>
<tbody>
<tr><td colspan="2">Subtitle1</td></tr>
<tr><td>test1</td><td></td></tr>
<tr><td>test2</td><td>2222</td></tr>
</tbody>
<tbody>
<tr><td colspan="2">Subtitle2</td></tr>
<tr><td>test3</td><td></td></tr>
<tr><td>test4</td><td></td></tr>
</tbody>
</table>
</html>
Any help would be appreciated.
w
I'd like to hide the rows in an HTML table which contain an empty
cell. This has to do with a plugin which generates various tables, so
the user only lists the data as paramaters. The plugin works nicely,
but I'd like to pimp it up. So, beside hiding the row in which a cell
is empty (because the user didn't enter data), I'd also like to hide
the section in which all rows but the subtitle are empty. Also, if no
data has been entered, then a message should be rendered instead of
the table. This is a simplified example where only the Title,
Subtitle1 and test2 line should be visible. Is it as simple as I think
it is or am I going about it the wrong way?
<html>
<script>
if((document.getElementTagName('td').innerHTML === '')) { //If a cell
is empty
document.getElementTagName('tr').style.display = 'none'; //Remove the
line
}
if((document.getElementTagName('tr').length === 1)) { //If only the
subtitle is visible
document.getElementTagName('tbody').style.display = 'none'; //Remove
the section
}
if((document.getElementTagName('tbody').length === 0)) { //If only the
title is visible
document.getElementTagName('table').style.display = 'none'; //Remove
the table
return "<b>No information</b>"; //Display the message instead
}
</script>
<table border="1">
<tr><td colspan="2">Title</td></tr>
<tbody>
<tr><td colspan="2">Subtitle1</td></tr>
<tr><td>test1</td><td></td></tr>
<tr><td>test2</td><td>2222</td></tr>
</tbody>
<tbody>
<tr><td colspan="2">Subtitle2</td></tr>
<tr><td>test3</td><td></td></tr>
<tr><td>test4</td><td></td></tr>
</tbody>
</table>
</html>
Any help would be appreciated.
w
Julian Knight
Jan 20, 2011, 9:47:22 AM1/20/11
to tiddl...@googlegroups.com
Hi, not in a position to test code right now but I can see that the script is a little too simple.
It would be better if you could put ID's on all of the rows and cells for a start, preferably numbered so row R01 would contain cells R01C01 and R01C02 etc. That way you can easily id the row from a cell. Otherwise you will need to mess with XPaths which is probably more efficient but rather harder to get your head around.
Then for each row, you will need to check if each of the cells is empty - in your example, of course, you'd only need to check the second cell on each row as the first is never empty. Keep count of the empty rows and if the final count is the same as the total number of rows, you can remove the table, otherwise remove the empty rows.
Also, the code you have there will operate on EVERY table in your TW file, not something you really want. ID your tables or use a more complex search (using JQuery is easier for such things) to ensure that you have got the right table. Remember that any Javascript will operate on the whole document unless you tell it otherwise.
Regards, Julian Knight
whatever
Jan 20, 2011, 2:54:55 PM1/20/11
to TiddlyWiki
Hi!
I tried it in a separate empty document with just the following code:
<html>
<script>
if((document.getElementId('x9').innerHTML === '')) { //If a cell is
empty
document.getElementId('x7').style.display = 'none'; //Remove the line
</script>
<table id="x1" border="1">
<tr id="x2"><td id="x3" colspan="2">Title</td></tr>
<tbody id="x4">
<tr id="x5"><td id="x6" colspan="2">Subtitle1</td></tr>
<tr id="x7"><td id="x8">test1</td><td id="x9"></td></tr>
<tr id="x10"><td id="x11">test2</td><td id="x12">2222</td></tr>
</tbody>
<tbody id="x13">
<tr id="x14"><td id="x15" colspan="2">Subtitle2</td></tr>
<tr id="x16"><td id="x17">test3</td><td id="x18"></td></tr>
<tr id="x19"><td id="x20">test4</td><td id="x21"></td></tr>
</tbody>
</table>
</html>
I even put the script after the table, but nothing happened.
w
I tried it in a separate empty document with just the following code:
<html>
<script>
if((document.getElementId('x9').innerHTML === '')) { //If a cell is
empty
document.getElementId('x7').style.display = 'none'; //Remove the line
</script>
<table id="x1" border="1">
<tr id="x2"><td id="x3" colspan="2">Title</td></tr>
<tbody id="x4">
<tr id="x5"><td id="x6" colspan="2">Subtitle1</td></tr>
<tr id="x7"><td id="x8">test1</td><td id="x9"></td></tr>
<tr id="x10"><td id="x11">test2</td><td id="x12">2222</td></tr>
</tbody>
<tbody id="x13">
<tr id="x14"><td id="x15" colspan="2">Subtitle2</td></tr>
<tr id="x16"><td id="x17">test3</td><td id="x18"></td></tr>
<tr id="x19"><td id="x20">test4</td><td id="x21"></td></tr>
</tbody>
</table>
</html>
I even put the script after the table, but nothing happened.
w
Eric Shulman
Jan 20, 2011, 3:32:55 PM1/20/11
to TiddlyWiki
> if((document.getElementId('x9').innerHTML === '')) { //If a cell is
document.getElementId(...)
is not the correct function name and I'm quite surprised you didn't
get an error (i.e., "object doesn't support this property or method").
The correct function name is:
document.getElementById(...)
-e
Eric Shulman
TiddlyTools / ELS Design Studios
whatever
Jan 20, 2011, 3:59:10 PM1/20/11
to TiddlyWiki
Hi, Eric,
You're right, of course, it was a typo. I tried it again with the
correct function name, but still nothing. What's interesting is that I
know this function works, because I've used it in a tool I've made,
but there it's activated on click. Here, I need it to activate on load/
rendering of the tiddler.
w
You're right, of course, it was a typo. I tried it again with the
correct function name, but still nothing. What's interesting is that I
know this function works, because I've used it in a tool I've made,
but there it's activated on click. Here, I need it to activate on load/
rendering of the tiddler.
w
Julian Knight
Jan 21, 2011, 4:49:25 AM1/21/11
to tiddl...@googlegroups.com
Hi,
I don't think that your script is running at all. I tried a simple alert in the script and nothing happened.
Apart from a missing closing }, you need the inline script plugin and to move the script tags outside the html tags, the code then works fine. I guess that TW is set not to trigger inline scripts inside the inline html - not an unreasonable thing really.
whatever
Jan 21, 2011, 5:27:39 AM1/21/11
to TiddlyWiki
Yes, I noticed the missing }. Anyway, if instead of
<script>
if((document.getElementById('x9').innerHTML === '')) { //If a cell is
document.getElementById('x7').style.display = 'none'; //Remove
the line
}
</script>
I use
<script>
{alert ("test")}
</script>
it shows the alert, but not if I keep the if function.
w
<script>
if((document.getElementById('x9').innerHTML === '')) { //If a cell is
document.getElementById('x7').style.display = 'none'; //Remove
the line
}
</script>
I use
<script>
{alert ("test")}
</script>
it shows the alert, but not if I keep the if function.
w
Julian Knight
Jan 24, 2011, 8:55:26 AM1/24/11
to tiddl...@googlegroups.com
Not sure what is happening then because it worked fine for me (I did put in the missing }) when I moved the <script> section outside the HTML section and IF I had the inline Javascript extension.
It would also be possible to achieve without the inline JS extension by writing the code into a function in a tiddler tagged with systemConfig (loaded at document load time) and run from the ViewTemplate.
whatever
Jan 24, 2011, 12:08:42 PM1/24/11
to TiddlyWiki
At the moment, I'd at least like to get that working in an ordinary
HTML document. From then on, it shouldn't be difficult to integrate it
into the plugin.
HTML document. From then on, it shouldn't be difficult to integrate it
into the plugin.
whatever
Jan 24, 2011, 12:51:19 PM1/24/11
to TiddlyWiki
Hi!
I found a possible solution, however, it is very awkward. The problem
is, I have about twenty tables and each has a different number of
sections and cells, so if a table has thirty lines, the code would
would get very long. This is the code (beware googlewrap):
<html>
<script>
function hideLines(){
document.getElementById('message').style.display = 'none'; //Hide the
message
if((document.getElementById('data1').innerHTML === '')) { //If a cell
is empty
document.getElementById('line1').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data2').innerHTML === '')) { //If a cell
is empty
document.getElementById('line2').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data3').innerHTML === '')) { //If a cell
is empty
document.getElementById('line3').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data4').innerHTML === '')) { //If a cell
is empty
document.getElementById('line4').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data1').innerHTML === '' &&
document.getElementById('data2').innerHTML === '')) { //If both cells
are empty
document.getElementById('tbody1').style.display = 'none'; //Remove the
subtitle
}
if((document.getElementById('data3').innerHTML === '' &&
document.getElementById('data4').innerHTML === '')) { //If both cells
are empty
document.getElementById('tbody2').style.display = 'none'; //Remove the
subtitle
}
if((document.getElementById('data1').innerHTML === '' &&
document.getElementById('data2').innerHTML === '' &&
document.getElementById('data3').innerHTML === '' &&
document.getElementById('data4').innerHTML === '')) { //If all four
cells are empty
document.getElementById('table').style.display = 'none'; //Remove the
table
document.getElementById('message').style.display = ''; //Display the
message
}
}
window.onload = hideLines;
</script>
<table id="table" border="1">
<tr><td colspan="2">Title</td></tr>
<tbody id="tbody1">
<tr id="sub1"><td colspan="2">Subtitle1</td></tr>
<tr id="line1"><td>test1</td><td id="data1">xx</td></tr>
<tr id="line2"><td>test2</td><td id="data2"></td></tr>
</tbody>
<tbody id="tbody2">
<tr id="sub2"><td colspan="2">Subtitle2</td></tr>
<tr id="line3"><td>test3</td><td id="data3"></td></tr>
<tr id="line4"><td>test4</td><td id="data4"></td></tr>
</tbody>
<tr><td colspan="2">Footer</td></tr>
</table>
<span id="message">No data</span>
</html>
w
I found a possible solution, however, it is very awkward. The problem
is, I have about twenty tables and each has a different number of
sections and cells, so if a table has thirty lines, the code would
would get very long. This is the code (beware googlewrap):
<html>
<script>
function hideLines(){
document.getElementById('message').style.display = 'none'; //Hide the
message
if((document.getElementById('data1').innerHTML === '')) { //If a cell
is empty
document.getElementById('line1').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data2').innerHTML === '')) { //If a cell
is empty
document.getElementById('line2').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data3').innerHTML === '')) { //If a cell
is empty
document.getElementById('line3').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data4').innerHTML === '')) { //If a cell
is empty
document.getElementById('line4').style.display = 'none'; //Remove the
line
}
if((document.getElementById('data1').innerHTML === '' &&
document.getElementById('data2').innerHTML === '')) { //If both cells
are empty
document.getElementById('tbody1').style.display = 'none'; //Remove the
subtitle
}
if((document.getElementById('data3').innerHTML === '' &&
document.getElementById('data4').innerHTML === '')) { //If both cells
are empty
document.getElementById('tbody2').style.display = 'none'; //Remove the
subtitle
}
if((document.getElementById('data1').innerHTML === '' &&
document.getElementById('data2').innerHTML === '' &&
document.getElementById('data3').innerHTML === '' &&
document.getElementById('data4').innerHTML === '')) { //If all four
cells are empty
document.getElementById('table').style.display = 'none'; //Remove the
table
document.getElementById('message').style.display = ''; //Display the
message
}
}
window.onload = hideLines;
</script>
<table id="table" border="1">
<tr><td colspan="2">Title</td></tr>
<tbody id="tbody1">
<tr id="sub1"><td colspan="2">Subtitle1</td></tr>
<tr id="line1"><td>test1</td><td id="data1">xx</td></tr>
<tr id="line2"><td>test2</td><td id="data2"></td></tr>
</tbody>
<tbody id="tbody2">
<tr id="sub2"><td colspan="2">Subtitle2</td></tr>
<tr id="line3"><td>test3</td><td id="data3"></td></tr>
<tr id="line4"><td>test4</td><td id="data4"></td></tr>
</tbody>
<tr><td colspan="2">Footer</td></tr>
</table>
<span id="message">No data</span>
</html>
w
whatever
Jan 24, 2011, 4:00:41 PM1/24/11
to TiddlyWiki
By the way, that was an HTML file. When I put this in a tiddler, it
didn't work,it just displayed the whole table.
w
didn't work,it just displayed the whole table.
w
Reply all
Reply to author
Forward
0 new messages