I want to appends ellipsis (…) to the end of row of datatable(in this comment column). For this I have added jQuery ellipsis js. how should I specify height to jQuery data table row so that it only show 2 line. Right now height is adjusted according to length of text.
This is my jQuery table
<div id="comments">
<c:choose>
<c:when test="${null ne comments and not empty comments}">
<table id="dataTable2" cellpadding="0" cellspacing="0" border="0" class="display" style="width:100%;">
<thead><tr><th>Id</th>
<th width="15%">User</th>
<th width="15%">Role</th>
<th width="45%">Comment</th></tr></thead>
<tbody>
<c:forEach items="${comm}" var="comm" varStatus="status">
<tr><td>${comment.commentId}</td>
<td width="15%">${comm.userFullName}</td>
<td width="15%">${comm.userRoleName}</td>
<td width="45%" style="height:20px" class="ellipsis multiline">${comm.CommentAbbreviation}</td></tr>
</c:forEach>
</tbody>
</table>
</c:when></c:choose>
</div>
jquery.autoellipsis.js
(function($) {
$.fn.ellipsis = function()
{
return this.each(function()
{
var el = $(this);
if(el.css("overflow") == "hidden")
{
var text = el.html();
var multiline = el.hasClass('multiline');
var t = $(this.cloneNode(true))
.hide()
.css('position', 'absolute')
.css('overflow', 'visible')
.width(multiline ? el.width() : 'auto')
.height(multiline ? 'auto' : el.height());
el.after(t);
function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };
var func = multiline ? height : width;
while (text.length > 0 && func())
{
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
}
});
};
})(jQuery);
css class
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
How should I set height to datatable row ?
This worked great for me
.dataTable th, .dataTable td {
max-width: 200px;
min-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
I found a solution. It isn't the most correct way but it works. I wrapped the data within the in a div and I have modified following line.
<td width="45%" style="height:20px" class="ellipsis multiline">${comm.CommentAbbreviation}</td>
Replace by
<td width="45%"><div class="ellipsis multiline" style="height: 35px;">${comm.CommentAbbreviation}</div></td>
It works for me
.td-limit {
max-width: 70px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
Related
I'm looking for a working example or fiddle that has filtering for price ranges along with some properties (such as 'On Sale'). Basically, I would like to filter an item to it's price range and to also see products that are on sale too in that price range. I have the price ranges working but how do I implement multiple ranges when the multiple checkboxes are checked. Also, how can I implement filtering the sale attribute?
Any help is appreciated.
The structure of the HTML and assignment of data-* attributes are sloppy and cluttered. Using a ton of divs makes the code difficult to ascertain purpose (if any).
Attributes such as [data-date] is not necessary in regards to the question (and probably not necessary in the real code either). Although functioning, attributes [min] and [max] are not standard on checkboxes, use [data-min] and [data-max] and make sure when using any attribute with a number value be converted into a true number.
The usefulness concerning something on sale and within a selected price range is dubious since the sale item is in a price range regardless. The sale items should simply be shown if a .sale class is assigned. Details are commented in demo.
// Clicking summary calls toggleFilters()
$('summary').on('click', toggleFilters);
/*
Any changes to form.filter calls filterItems()
The second parameter (event.data) indicates what is considered $(this)
*/
$('.filter').on('change', ':checkbox', filterItems);
// If details is closed, the table cells are shown and the .filter is reset
function toggleFilters(e) {
if (!!$(this).parent('details').attr('open')) {
$('tbody td').show();
$('.filter')[0].reset();
}
}
/*
//A Hide all cells in tbody
//B On each checkbox...
if it is checked and has class .priceRange...
...get its [data-min] and [data-max] into an array and add that to the ranges array
//C if it is checked and has class .saleItems sales flag is true
*/
function filterItems(e) {
let ranges = [];
let sales = false;
$('tbody td').hide(); //A
$(':checkbox').each(function() {
if (this.checked) {
if ($(this).is('.priceRange')) { //B
let min = Number($(this).data('min'));
let max = Number($(this).data('max'));
ranges.push([min, max]);
}
if ($(this).is('.saleItems')) { //C
sales = true;
}
}
});
/*
//A On each [data-price] cell...
//B Collect all [data-item] cells into an array
//C Collect all .img cells into an array
//D if [data-price] has .sale class use the [data-sale] value
//E for each sub array in the ranges array...
//F Run between() first param is price, second param is min of sub array third param
is max of sub array
//G if true then show cells [data-price], [data-item], and .img cells associated with
current index of the arrays images and items
//H if sales flag is true and current checkbox is checked and has the .saleItems class...
do the same as line G
*/
$('.products').find('[data-price]').each(function(index) {
const items = $('[data-item]').toArray();
const images = $('.img').toArray();
let price = this.matches('.sale') ?
Number($(this).data('sale')) : Number($(this).data('price'))
for (let range of ranges) {
if (between(price, range[0], range[1])) {
$(this).show();
$(images[index]).show();
$(items[index]).show();
}
}
if (sales && $(this).is('.sale')) {
$(this).show();
$(images[index]).show();
$(items[index]).show();
}
});
}
/*
Utility function that determines if a given number is in a given range
*/
function between(num, min, max) {
return num >= min && num <= max;
}
/*
Utility function that will set the images of .img cells with an array of urls
*/
function setImages(array) {
$('.img').each(function(index) {
$(this).css('background-image', `url(${array[index]})`);
});
}
/* Utility function that sets colspan values according to max number of cells in a row
*/
function tableStructure() {
let cs = [];
$('tr').each(function() {
let size = $(this).children().length;
cs.push(size);
});
let sorted = cs.sort();
$('.cs').attr('colspan', sorted[sorted.length - 1]);
$('tbody').find('tr').last().prev('tr').find('td').css('border-bottom', '0');
}
const images = ['https://www.dhresource.com/webp/m/0x0s/f2-albu-g6-M00-F1-0F-rBVaSFqzohOAJ_2FAAFgtbG9J2U328.jpg/women-new-large-size-casual-tops-loose-ladies.jpg', 'https://www.sherainbow.com/1634-large_default/pogt-casual-long-sleeve-t-shirt-women-loose-fit-wifey-print-slouchy-shirt-top-pink-cb12e6qb3bp.jpg', 'https://sc02.alicdn.com/kf/HTB1ZlLYbHsTMeJjy1zeq6AOCVXar/New-Fashion-Design-Women-plain-black-t.jpg', 'https://aritzia.scene7.com/is/image/Aritzia/large/s19_07_a06_63877_16624_on_a.jpg', 'https://cdn.forcast.com.au/media/catalog/product/cache/image/e9c3970ab036de70892d86c6d221abfe/1/8/18p928blk_18t946sto_frontfull_117_cm_2_7.jpg', 'https://image.skechers.com/img/productimages/xlarge/52675_NVOR.jpg', 'https://static.enko-running-shoes.com/2019/img/v5/chaussure-running-enko.jpg'];
tableStructure();
setImages(images);
.products {
table-layout: fixed;
}
caption,
th {
text-align: left;
font-size: 1.15rem;
}
caption {
font-size: 1.5rem;
font-weight: 700
}
td {
border-bottom: 3px ridge grey;
}
tbody td {
padding-bottom: 5px
}
.dept tr:first-of-type>th::before {
content: attr(data-dept);
font-size: 1.25rem
}
.category th::before {
content: attr(data-cat)
}
.item>td::before {
content: attr(data-item);
font-size: 1.2rem
}
.price>td::before {
content: '$'attr(data-price)
}
.price>td::after {
content: '\a0'
}
.price>td.sale::before {
content: '$'attr(data-price);
text-decoration: line-through red
}
.price>td.sale::after {
content: '$'attr(data-sale);
color: green
}
.img {
background-size: contain;
background-repeat: no-repeat;
background-position: center;
min-width: 100px;
min-height: 100px;
}
label {
display: inline-block;
width: 150px;
margin: 0 5px;
border-bottom: 1px solid black;
}
details {
cursor: pointer
}
tbody tr:last-of-type td {
border-bottom: 0;
}
summary {
font-size: 1.25rem;
border-top: 3px ridge grey
}
<table class="products">
<caption>Shop</caption>
<tbody class='dept'>
<tr>
<th class='cs' data-dept='Apparel'></th>
</tr>
<tr class='category'>
<th class='cs' data-cat='Shirts'></th>
</tr>
<tr class='item'>
<td data-item='item 1'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 2'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 3'></td>
<td class='img' rowspan='2'></td>
</tr>
<tr class='price'>
<td data-price='9.99'><br></td>
<td data-price='23.99'><br></td>
<td class='sale' data-price='32.99' data-sale='17.99'><br></td>
</tr>
<tr class='category'>
<th class='cs' data-cat='Pants'></th>
</tr>
<tr class='item'>
<td data-item='item 4'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 5'></td>
<td class='img' rowspan='2'></td>
</tr>
<tr class='price'>
<td class='sale' data-price='39.99' data-sale='12.99'><br></td>
<td data-price='75.99'><br></td>
</tr>
<tr class='category'>
<th class='cs' data-cat='Shoes'></th>
</tr>
<tr class='item'>
<td data-item='item 6'></td>
<td class='img' rowspan='2'></td>
<td data-item='item 7'></td>
<td class='img' rowspan='2'></td>
</tr>
<tr class='price'>
<td data-price='39.99'><br></td>
<td class='sale' data-price='125.99' data-sale='77.99'><br></td>
</tr>
</tbody>
<tfoot>
<tr>
<td class='cs'>
<form class='filter'>
<details>
<summary>Filters</summary>
<label><input class="priceRange" data-min='0' data-max='9.99' type="checkbox" value='true'>Under $10</label>
<label><input class="priceRange" data-min='10' data-max='19.99' type="checkbox">$10 to $20</label>
<label><input class="priceRange" data-min='20' data-max='29.99' type="checkbox">$20 to $30</label>
<label><input class="priceRange" data-min='30' data-max='39.99' type="checkbox">$30 to $40</label>
<label><input class="priceRange" data-min='40' data-max='999' type="checkbox">Over $40</label>
<label><input class="saleItems" type="checkbox" value='true'>On Sale</label>
</details>
</form>
</td>
</tr>
</tfoot>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm not really sure what the desired behavior of the sale filter is, but this should put you in the right direction:
updated plunkr
$('.priceFilter').on('change', (e) => {
var filters = $('.priceRange:checked')
.toArray()
.map(el => ({
min: $(el).attr('min'),
max: $(el).attr('max'),
sale: $(el).attr('data-sale')
}));
if (!filters.length) {
$('.item').show();
} else {
$('.item').hide();
var sale = filters.some(el => el.sale == 'True') ? 'True' : 'False';
filters
.forEach(elm => $('.item')
.filter((i, el) =>
parseFloat($(el).attr('data-price')) >= elm.min &&
parseFloat($(el).attr('data-price')) <= elm.max &&
$(el).attr('data-sale') == sale)
.show());
}
});
I am relatively new to AngularJs and I am having trouble implementing a Fixed Header on my table. I am using a modified version of a library I am utilizing on other parts of my application with no problem however on this specific table it is not working. I even tried having two separate tables one for the head and one for the body but since the can be dynamic with Angular and a Maximize, this does not work.
js code:
<div id="test"
class="panel-body" style="height: 222px; overflow-y: scroll;">
<table id="data-sources-table" class="table table-striped drag-drop" fixed-header-custom >
<thead>
<tr>
<th style="position: relative">TestProperty</th>
<th style="position: relative" ng-repeat="ds in model.dataSamples"
style="line-height: 16px; vertical-align: top;">
<span tooltip="{{ds.dsName}}"
tooltip-placement="top">
{{ds.dsName.slice(0, 20)}}
</span>
<button class="btn-graphic-only btn-remove" type="button"
ng-show="ds"
ng-model="singleModel"
tooltip="Test data sample"
tooltip-placement="left"
ng-click="removeDs($index)">
</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(property, linkedDs) in model.properties">
<td ng-class="{'narrow-column': $first}"
ng-style="highlightIfInDetails(model.properties[property])">
<span>
<ul style="margin-bottom: 0px; list-style-type: none; padding: 0px;">
<li dnd-draggable="ds.dsProfile[property]"
dnd-effect-allowed="copy"
dnd-copied="dragEnd(property, ds.dsProfile[property])"
dnd-selected="dropzoneModels.selected = ds.dsProfile[property]">
<label class="btn-property" style="font-size: 100%;">
{{property}}
</label>
<button class="btn-graphic-only btn-remove" type="button"
ng-model="singleModel"
tooltip="Remove property from schema"
tooltip-placement="right"
ng-click="removeProperty(property)">
</button>
<div ng-show="modifySchemaMode === true">
<!--keep the following on the same line to prevent spaces between values-->
{{model.properties[property]["main-type"]}}<span
ng-show="model.properties[property]['main-type']">:{{model.properties[property]["detail"]["detail-type"]}}</span>
</div>
</li>
</ul>
</span>
</td>
<td ng-repeat="ds in model.dataSamples"
ng-style="highlightIfInDetails(ds.dsProfile[property])">
<span class="btn-property">
<label class="btn-property"
style="font-size: 100%; font-weight: normal;
-webkit-user-select: none; -moz-user-select: none;
-ms-user-select: none;"
unselectable="on"
single-click="showInDetails1(ds, property, false)"
ng-dblclick="showInDetails2(ds, property);">
<div ng-show="ds.dsProfile[property]['original-name']">
<label style="font-size: 100%;">{{ds.dsProfile[property]['original-name']}}</label>
</div>
<!--keep the following on the same line to prevent spaces between values-->
{{ds.dsProfile[property]["main-type"]}}<span
ng-show="ds.dsProfile[property]['main-type']">:{{ds.dsProfile[property]["detail"]["detail-type"]}}</span>
<span class="btn-merge-indicator"
ng-show="ds.dsProfile[property]['merged-into-schema']">
</span>
</label>
<span class="btn-use-check"
ng-show="ds.dsProfile[property]['used-in-schema']">
</span>
<br>
<select name="altNameSelected" id="altNameSelected"
ng-options="option.name for option in ds.dsProfile[property]['match-names'].availableOptions track by option.id"
ng-model="ds.dsProfile[property]['match-names'].selectedOption"
ng-show="ds.dsProfile[property]['match-names'].availableOptions.length > 0"
ng-change="changeMatchedProperty(ds, property)">
</select>
</span>
</td>
</tr>
</tbody>
</table>
</div>
library:
/**
* AngularJS fixed header scrollable table directive
* #author Jason Watmore <jason#pointblankdevelopment.com.au> (http://jasonwatmore.com)
* #version 1.2.0
*/
(function () {
angular
.module('anguFixedHeaderTableCustom', [])
.directive('fixedHeaderCustom', fixedHeaderCustom);
fixedHeaderCustom.$inject = ['$timeout'];
function fixedHeaderCustom($timeout) {
return {
restrict: 'A',
link: link
};
function link($scope, $elem, $attrs, $ctrl) {
var elem = $elem[0];
// wait for data to load and then transform the table
$scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
if (isTableDataLoaded) {
transformTable();
}
});
function tableDataLoaded() {
// first cell in the tbody exists when data is loaded but doesn't have a width
// until after the table is transformed
var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
return firstCell && !firstCell.style.width;
}
function transformTable() {
// reset display styles so column widths are correct when measured below
angular.element(elem.querySelectorAll('thead, tbody, tfoot')).css('display', '');
// wrap in $timeout to give table a chance to finish rendering
$timeout(function () {
// set widths of columns
angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) {
var tdElems = elem.querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');
var tfElems = elem.querySelector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')');
var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth;
if (tdElems) {
tdElems.style.width = columnWidth + 'px';
}
if (thElem) {
thElem.style.width = columnWidth + 'px';
}
if (tfElems) {
tfElems.style.width = columnWidth + 'px';
}
});
// set css styles on thead and tbody
angular.element(elem.querySelectorAll('thead, tfoot')).css('display', 'block');
angular.element(elem.querySelectorAll('tbody')).css({
'display': 'block',
'height': $attrs.tableHeight || 'inherit',
'overflow': 'auto'
});
// reduce width of last column by width of scrollbar
var tbody = elem.querySelector('tbody');
var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth;
if (scrollBarWidth > 0) {
// for some reason trimming the width by 2px lines everything up better
scrollBarWidth -= 2;
var lastColumn = elem.querySelector('tbody tr:first-child td:last-child');
lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px';
}
});
}
}
}
})();
I have to increase the width of the select element onmouseover and decrease the width onmouseout.The select element is defined under td element of a table.I have done some coding to change its size but it is affecting table position.
How to solve this?
Please Help me out.
<head>
<script>
function AdjustWidth(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
if (ddl.options[i].text.length > maxWidth) {
maxWidth = ddl.options[i].text.length;
}
}
ddl.style.width = maxWidth * 27 + "px";
}
function AdjustWidthOut(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
if (ddl.options[i].text.length > maxWidth) {
maxWidth = ddl.options[i].text.length;
}
}
ddl.style.width = maxWidth * 7 + "px";
}
</script>
</head>
<table>
<tr>
<td valign="top"><strong style="color: #3265a6">Area: </strong></td>
<td>
<select onmouseover="AdjustWidth(this)" onmouseout="AdjustWidthOut(this)">
<option value="">x</option>
<option value="">y</option>
<option value="">z</option>
<option value="">x</option>
</select>
</td>
</tr>
</table>
Your code seems to do what you've instructed it to do.
During onmouseover, it sets the select's width to 27px, because the longest option is one character.
During onmouseout, it sets the select's width to 7px.
Note that 27px is not wide enough to show a single character within the select. 7px is barely wide enough to show the drop-down arrow.
In the snippet below, I've added divs that are 27px and 7px. You'll see that your select box matches each of them during onmouseover and onmouseout.
If you want the select to be wider, use values larger than 27 and 7. You may need to experiment to find what works best for you.
If you want the select to return to its original width during onmouseout, you can do so like this:
function AdjustWidthOut(ddl) {
ddl.style.width = 'auto;
}
Snippet:
function AdjustWidth(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
if (ddl.options[i].text.length > maxWidth) {
maxWidth = ddl.options[i].text.length;
}
}
ddl.style.width = maxWidth * 24 + "px";
}
function AdjustWidthOut(ddl) {
var maxWidth = 0;
for (var i = 0; i < ddl.length; i++) {
if (ddl.options[i].text.length > maxWidth) {
maxWidth = ddl.options[i].text.length;
}
}
ddl.style.width = maxWidth * 7 + "px";
}
#D1 {
width: 27px;
height: 20px;
background: green;
}
#D2 {
width: 7px;
height: 20px;
background: green;
}
<table>
<tr>
<td>27px:
<td><div id="D1"></div>
<tr>
<td>7px:
<td><div id="D2"></div>
<tr>
<td valign="top"><strong style="color: #3265a6">Area: </strong></td>
<td>
<select onmouseover="AdjustWidth(this)" onmouseout="AdjustWidthOut(this)">
<option value="">x</option>
<option value="">y</option>
<option value="">z</option>
<option value="">x</option>
</select>
</td>
</tr>
</table>
You will need to set a width for your table and/or your rows and columns, otherwise your table width is set to 100% of its content. Take a look at this fiddle I created which only changes the width of your dropdown element.
http://jsfiddle.net/1k03tvmu/
table{border: 1px solid;}
tr{border: 1px solid;}
td{ width: 100px; position: relative;}
td.content{width: 1000px; }
I'm trying to implement a live search (filtering) feature with jQuery for a table. The table contains a list of people and their grad year and high school. When the user starts typing inside the search input, the table will start filtering out all the rows that do not contain the value of the search input. It will also add the class of highlight to the td that the searched text was in.
How can I filter each row and highlight the td element when the user searches something? I tried implementing this with the code below but to no avail. What can I tweak in this code to get this working correctly?
Below is my code. Here is my jsFiddle: http://jsfiddle.net/mikerodriguez/jybrnt22/2/
jQuery
$("#search").on("keyup", function(){
var input = $(this).val();
$("#search_table tbody tr").each(function(){
var row = $(this);
var td_element = $("#search_table tbody tr td");
if(input !== td_element.text()){
row.hide();
}else{
row.show();
td_element().addClass("highlight");
}
})
});
CSS
body {
margin: 0;
padding: 0;
font-family: Arial;
font-size: 14px;
}
.search_field {
padding: 15px;
}
.search_field input[type="text"] {
padding: 15px;
width: 98%;
font-size: 18px;
}
.search_table_container {
padding: 15px;
}
.search_table {
width: 100%;
}
.search_table th {
background-color: #AAA;
font-weight: bold;
padding: 10px 0px;
}
.search_table td {
text-align: center;
background-color: #CCC;
padding: 15px 0px;
}
HTML
<div class="search_field">
<input type="text" id="search" placeholder="Search for Person, Class, or High School">
</div>
<div class="search_table_container">
<table id="search_table" class="search_table">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>High School</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>2014</td>
<td>Some High School</td>
</tr>
<tr>
<td>Homer Simpson</td>
<td>2015</td>
<td>Springfield High School</td>
</tr>
<tr>
<td>Bugs Bunny</td>
<td>2050</td>
<td>Looney Tunes High School</td>
</tr>
<tr>
<td>George Washington</td>
<td>1749</td>
<td>Georgetown Academy</td>
</tr>
<tr>
<td>Marty McFly</td>
<td>1991</td>
<td>Back to the Future</td>
</tr>
<tr>
<td>Doc Emmet Brown</td>
<td>1965</td>
<td>One Point Twenty-one Gigawatts</td>
</tr>
</tbody>
</table>
</div>
One problem is:
input !== td_element.text()
You're comparing partial input values to the entire contents of your columns. Instead it should be something like
td_element.text().indexOf(input) == -1
But there were actually quite a few issues (including simple syntax errors, e.g., td_element is not a function). I tweaked your example to something that works: http://jsfiddle.net/gh5kjku5/2/
$("#search").on("keyup", function(){
var input = $(this).val();
$("#search_table tbody tr").each(function(){
var row = $(this);
var td_elements = row.find('td');
var colText = td_elements.text();
if(colText.indexOf(input) == -1){
row.hide();
}else{
row.show();
td_elements.addClass("highlight");
}
})});
You'll need to do a bit more work to do things like reset the td background colors when the search box is cleared. Good luck!
hi try this it's working.
$("#search").on("keyup", function () {
var input = $(this).val();
if (input == '') {
$("#search_table tbody tr").show();
} else {
$("#search_table tbody tr").show();
$("#search_table tbody tr").each(function () {
var row = $(this);
var td_element = $("#search_table tbody tr td");
if ($(row).text().trim().toUpperCase().indexOf(input.toUpperCase()) > -1) {
row.hide();
} else {
row.show();
}
});
}
});
see jsfiddle link http://jsfiddle.net/jybrnt22/14/
Here is my code. I have tried everything I can think of. I have tried using just div ID's and have now tried classes. Nothing seems to work. I just want the number 2 not to be visible if there is no entry beside it. It doesn't matter if it is in a table or not.
Thanks.
<style type="text/css">
<!--
.leftone {
float: left;
height: auto;
width: auto;
}
.rightone {
float: left;
height: auto;
width: auto;
}
.lefttwo {
float: left;
height: auto;
width: auto;
}
.righttwo {
float: left;
height: auto;
width: auto;
}
-->
</style>
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td width="200" height="50"><div class="leftone">1.)</div></td>
<td width="200" height="50"><div class="rightone">The Number One</div></td>
</tr>
<tr>
<td width="200" height="50"><div class="lefttwo">2.)</div></td>
<td width="200" height="50"><div class="righttwo"></div></td>
</tr>
</table>
<p> </p>
<script type="text/javascript">
<!--
function shownumbers() {
var myNum1 = '[.rightone]';
if(myNum1 != ''){
document.getElementById('.leftone').style.display = "block";
}
else if(myNum1 == ''){
document.getElementById('.leftone').style.display = "none";
}
var myNum2 = '[.righttwo]';
if(myNum2 != ''){
document.getElementById('.lefttwo').style.display = "block";
}
else if(myNum2 == ''){
document.getElementById('.lefttwo').style.display = "none";
}
}
//-->
</script>
You cannot use getElementById with classes. Also, you don't need the '.' or '#' when using these methods in javascript. Below should do what you are asking. Although if there is only ever 1 item of class 'rightone' and 'leftone' you should use ID's.
var myNum1 = document.getElementsByClassName('rightone')[0].innerHTML;
if(myNum1 != ''){
document.getElementsByClassName('leftone')[0].style.display = 'block';
} else if(myNum1 == ''){
document.getElementsByClassName('leftone')[0].style.display = 'none';
}
A more elegant solution would be:
HTML:
<table width="400" border="0" cellpadding="0" cellspacing="3" id="tableONE">
<tr>
<td><div class="left">1.)</div></td>
<td><div class="right">The Number One</div></td>
</tr>
<tr>
<td><div class="left">2.)</div></td>
<td><div class="right"></div></td>
</tr>
</table>
JS:
var right = document.getElementsByClassName('right');
for(var i=0;i<right.length;i++){
if(!right[i].innerHTML){
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'none';
} else {
right[i].parentNode.parentNode.getElementsByClassName('left')[0].style.display = 'right';
}
}
Kinda similar to Jason's, but I spent the time so I'mma post it. ;)
JSFiddle: http://jsfiddle.net/H3UNH/1/
HTML:
<table id="tableONE">
<tr>
<td width=50>1.)</td>
<td >The Number One</td>
</tr>
<tr>
<td>2.)</td>
<td></td>
</tr>
</table>
(I do still like the width attribute for cells in tables; it can be moved to CSS but this is one of those exceptions for me where the markup and presentation can have a tiny bit of overlap. Move everything else to CSS. Your mileage may vary.)
CSS:
td { padding: 3px; text-align:left; height: 50px;}
JavaScript:
function shownumbers() {
var rows = document.getElementsByTagName('tr');
for(var i=0,len=rows.length;i<len;i++) {
var _this = rows[i];
var rowCells = _this.getElementsByTagName('td');
if(rowCells[1].innerHTML == "") {
_this.style.display = "none";
}
}
}
shownumbers();
(for the purpose of the demo, I just separately call shownumbers. If you want it to be automatic, make it self-invoking. Otherwise call it from wherever it makes sense)
I think the more important lesson here isn't the JavaScript, actually. ;) I understand that not everyone is writing perfect JavaScript (heck, mine's not perfect either). But you really need to understand the purpose of CSS and classes in general to write good maintainable markup and presentation for the web! I hope that doesn't sound too condescending or anything; it wasn't meant to be.
By using the :empty selector.
var els = document.querySelectorAll('td div:empty'),
i = els.length,
el;
for(;i--; ) {
el = els[i];
do {
el = el.parentNode;
} while ( el.nodeName != 'TR' )
el.style.display = 'none';
}
Fiddle: http://jsfiddle.net/uAUt8/