Filtering table rows based on tags in the last coloumn

Question 1

Question by DJDavid98

I set up a JSFiddle here: http://jsfiddle.net/DJDavid98/w2Xbd/

I have this page with quite a few table rows, from which the last row contains some tags. When the user clicks on one of the tags, I want to hide (fade out) all the rows that doesn’t have that given tag.

My attempts at making this work failed horribly, and I literally have no more ideas.

It works the way it is right now, but the thing is, it only shows the rows that only have that class in it, and no others. I need to expand the function so it’ll check for all the tags and decide if the row should be hidden or not.

Here is some related JS, that does what it does currently:

$('tbody td.type .tag').on('click',function(){
    var type = ($(this).attr('class')).replace(/tag /g,'');
    $('#tagSearch').fadeOut('fast',function(){
        $('#tagSearch').html(typesReverse[type]).attr('class','tag '+type).fadeIn('fast');
        $('tbody td.type .tag').each(function(index){
            if (!$(this).hasClass(type)) $(this).parent().parent().slideUp('fast');
        });
    });
})

Answer

Answer by Starx

Starx

I don’t understand the need for such complexity but, there is way to select all the element except some exceptions. Like:

$("tr:not('.type')")

Will select all the rows with does not have .type as its class. Use them like this (just an example)

$("tr:not('.type')").hide();

Question 2

Question by samyb8

samyb8

I have always heard that it is better to avoid using <table> in HTML.

However, I encountered a situation in which a table would make my life easier when building a page that shows multiple products and their characteristics.

Should I try to hack it so that I do not need a table, or should I just go with a table?

Answer

Answer by Starx

Starx

No, you should not avoid the TABLE concept. Learn/Use it to display tabular data, not web layouts.

Learn about those elements from the W3C.

Question 3

Question by Chad Decker

Chad Decker

I generally set fixed column widths via CSS with flawless results:

#tableID thead tr th:nth-child(1){width: 75px;} 
#tableID thead tr th:nth-child(2){width: 75px;}
/* etc… */

But now I’m in a situation where I won’t know the desired column widths until runtime. Here’s an excerpt from the code I’m using to dynamically set the column widths:

var tr=$("<tr>");
var colArr=Home.ColDefs[this.statBatchType].colArr;
for(var i=0;i<colArr.length;i++){
    var col=colArr[i];
    tr.append(
        $("<th>")
            .html(col.title)
            .css("width",col.width)
    );
}
this.jqTHead.append(tr);

Sorry this code is a bit out of context but the bottom line is that I’m adding columns, represented by <th> elements, to a table header and setting each one’s width.

What ACTUALLY happens, however, is that Firefox is treating the column width as a minimum and then automatically expanding the column width as the user expands his browser window. Consider a case where my JavaScript code sets the width of each column to 75px. Firefox will ensure each column is at least 75px wide, but if the user maximizes (or enlarges) his browser, provided there is sufficient room, each column will be automatically widened.

This is odd to me since the JavaScript code would seem to be the functional equivalent of what I was doing in CSS. Yet the CSS approach doesn’t cause this odd behavior.

Any thoughts?

Answer

Answer by Starx

Starx

You can assign a class selector with the required css and then assign it later when you need it on runtime.

.fixed {
   width: 50px;
}

And assign them when you want in run time.

$("th").addClass('fixed');

Question 4

Question by user1483487

user1483487

I am developing a mobile site and trying to use very simple markups.

Below is my code which is giving me problem :

<div class="abc">
  <div>&nbsp;</div>
  <table>

  </table>
</div>

CSS

.abc {height:some-dynamic-value-in-px}

.abc div {height:5%;}
.abc table {height:95%;}

Problem is this code worked on all the latest phones.But when I checked on sony ericson (500i)
the table height was coming out of the parent div abc and the UI was distorted.
I checked this site http://www.apptools.com/examples/tableheight.php
and gave height {100%} to body but still no success.
Please let me know where I am going wrong.

Also, when I gave the height in px it worked for all handsets.But I want to know the reason why percentage was not working.

Thanks.

Answer

Answer by Starx

Starx

If you already know the height of the div, then its better to use fixed dimensions in px.

Try to avoid the complexity, if its not necessary.

And for some browsers, giving body { height: 100%; } might not be enough.

html, body { height: 100%; }

.abc { height:100%; }
.abc div { height:5%; }
.abc table { height:95%; }

Also, dont forget to include the DOCTYPE on your webpage.

Question 5

Question by John Smith

John Smith

Here’s a fantastic CSS menu:

The only disadvantage its not stretched to 100%… if it has 2 elements, it should be 50%/50%, if 4 items then 25%/25%/25%/25% just like they were table cells. How to do that? Im new to CSS

Answer

Answer by Starx

Starx

Modify its width as 100% will make the menu span to full width.

#myfantasticmenu { width: 100%; }

I simulated the change with firebug and the needed Style defination was

#nav {
    overflow: hidden; /* To clear the div */
    width: 100%;
}

And about the part, where you need 50/50 for two and 25 each when the item are 4, you will require some javascript to do so.

If you consider using jQuery then it will something like

childs= $("#myfantasticmenu").children('a'); //grab the list items
childs.css('width', (100/childs.length)+%);

If avoiding scripting is your MAJOR target, then bring tables into the games, they automatically do the behavior you need.

Question 6

Question by user1250526

user1250526

Hi guys I have a css file which styles my tables, although I have one table where I would like to use a different style, or no style? is there a way I can do something like and then it is plain and ignores the css?

I have looked but I can not find anything related!

Answer

Answer by mert

mert

Use class definitions for table properties in your CSS file. Whenever you want them, use with class property.

CSS

table.myClass {
...
}

HTML

<table class="myClass">...</table>
<table class="anotherTableWithAnotherClass">...</table>

Answer

Answer by Starx

Starx

CSS are cascading style sheets, they only style an element. Can’t manipulate anything. You will need to use JavaScript.

Best way I know of, is to use CSS classes for different styles. And use javascript to switch them or remove them.

Question 7

Question by Craig

Craig

currently I have a table for information called episodes. The table has fields consisting of title, air date, episode number, and plot. I use javascript to clone the fields and also to delete them. My problem is the delete function deletes only the title, airdate, and episode number; however the plot box remains. The problem from what I can tell is that the plot is wrapped in a different <tr></tr> tag. How do i get the delete function to delete both sets?

Here is the table

<table id="template" style="display: none">
<tr class="line">
    <td width="50%">
    <label><?php _e('Episode Title'); ?></label>
    <p>
      <input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:100%;" />
    </p>    
    </td>

    <td width"10%">        
    <label><?php _e('Airdate'); ?></label>
    <p>
      <input type="text" name="episode_airdate[]" id="episode_airdate[]" value="" class="airdate regular-text" style="width:100%" />
    </p>
    </td>

     <td width="10%">        
    <label><?php _e('Season:'); ?></label>
    <p>
          <?php

            for($i=1; $i<=50; $i++)
                $season_nums[]=$i;

            echo '<select name="episode_season[]" select id="episode_season[]" class="season regular-text" style="100%">';
                echo '<option value="">' . __("Season" ) . '</option>';
                foreach($season_nums as $season_num){
                    $selected = '';
                    echo '<option value="' . $season_num . '" ' . $selected . '>' . $season_num . '</option>';
                }
            echo '</select>';
            ?>
    </p>
    </td>

    <td width="10%">        
    <label><?php _e('Episode:'); ?></label>
    <p>
      <input type="text" name="episode_number[]" id="episode_number[]" value="" class="number regular-text" style="width: 100%" />
    </p>
    </td>



    <td width="10%" class="commands">
        <a rel="delete" class="button">-</a> <a rel="add" class="button">+</a>
    </td>


</tr>

<tr class="line2"> 
   <td width="100%">       
    <label><?php _e('Plot:'); ?></label>
      <textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text"value="" cols="100%" rows="10" tabindex="4" ><?php echo $_POST['episode_season'] ?></textarea>
    </td>
</tr>

Here is the JavaScript

        // Delete the "-" button in first row
    $('#attachments tr:first-child .commands a[rel="delete"]').remove();
}

function items_add()
{
    obj = $('#template tr').clone().appendTo('#attachments');
    lines++;

    if (arguments.length > 0) {
        options = arguments[0];

        $('.title', obj).val( options.title );
        $('.airdate',   obj).val( options.airdate );
        $('.season',   obj).val( options.season );
        $('.number',   obj).val( options.number );
        $('.plot',   obj).val( options.plot );
    }
}

$('#attachments').delegate('.commands a', 'click', function()
{
    var action = $(this).attr('rel');
    var confirm_delete = true;

    // Add action
    if ('add' == action) {
        items_add();
    }

    // Delete action
    if ('delete' == action) {
        // La TR en la tabla
        var oTr = $(this).parent().parent();
        var episode_name = $('.title', oTr).val();
        var episode_airdate = $('.airdate', oTr).val();
        var episode_season = $('.season', oTr).val();
        var episode_number  = $('.number', oTr).val();
        var episode_plot  = $('.plot', oTr).val();


        if (episode_name != '' || episode_number != '' || episode_plot != '') {
            if ( !confirm('Are you sure you want to delete ' + episode_name + '?') ) {
                confirm_delete = false;
            }
        }

        if (confirm_delete) {
            oTr.remove();
            lines--;
        }
    }
});

$(document).ready(function()
{
    items_init();
});

})(jQuery);

Your help will be greatly appreciated

Answer

Answer by Starx

Starx

Change this line

var oTr = $(this).parent().parent();

to

var oTr = $(this).closest("tr");

Then use oTr.remove()

Question 8

Question by deathlock

deathlock

I’ve seen that similar questions have been asked before, such as: For tabular data, what renders faster, CSS or <TABLE>? or Why not use tables for layout in HTML?

However, besides being a rather old questions (2-4 years ago), I am wondering if there is actually a research/a data which proves with number that (with CSS) renders faster than for displaying tabular data.

I’m not trying to be offensive/disregarding the notion that DIV + CSS is faster (or table is more appropriate), I’m only wanting to know for practical purposes.

I also am not intending this to be a discussion/debate. A link to numbers is what I was expecting.

.

Like previous questions, I’m also aware that to display tabular data it is better to use table. But I just want to know which one is actually, statistically, faster.

Pardon my English, not a native speaker. Sorry if there is any offense taken.

Answer

Answer by Starx

Starx

Update:

The Discussion about Tables Or Divs have been long fought and left unsettled. As mentioned in your question yourself, the table is more logical when used to show tabular data.

Apart from this as we are moving on to HTML5, the elements are more logical then just styling components. Lets divs divide a portion and Let table display data.

Answering the Misleading Title

CSS is a stylesheet and Table is Element. The comparison between these two are obsolete.###

Read this article. This approaches different then articles normally do.

Question 9

Question by Mehdi

Mehdi

Hello !

I want to remove the current and the yellow too when I click to the basket icon on the right.

here is a screenshot :

enter image description here

here is my html code of the two rows which I want to delete by the click :

<tr>
              <td class="bar_td" colspan=7>
                <strong>PRESTATION 2</strong>
              </td>
            </tr>
            <tr class="ligne_suppr">
              <td class="jr_td">
                <img class="jour_prest" src="img/ico/jour_presta.png" alt="" width="16" height="16" /> Mardi 24 jan 2011
                <p>ou</p>
                <img class="jour_prest" src="img/ico/jour_presta.png" alt="" width="16" height="16" /> Mercredi 25 jan 2011
              </td>
              <td class="cr_td">
                <select>
                  <option value="h9">10h30</option>
                  <option value="h10">11h30</option>
                </select>
                <select>
                  <option value="h11">10h30</option>
                  <option value="h12">11h30</option>
                </select>
              </td>
              <td class="rp_td">
                <select>
                  <option value="h13" SELECTED>2h00</option>
                  <option value="h14">3h00</option>
                </select>
              </td>
              <td class="mn_td">
                <select>
                  <option value="h15">2h00</option>
                  <option value="h16" SELECTED>6h00</option>
                </select>
              </td>
              <td class="tt_td">
                <strong>8h.</strong>
              </td>
              <td class="pttc_td">
                <strong>148 &#8364;</strong>
              </td>
              <td class="cor_td">
                <a href="#">
                  <img src="img/ico/corbeille.png" alt="" width="13" height="13" />
                </a>
              </td>
            </tr>

and the Javascript code :

<script>
          $(".ligne_suppr a").click(function(e) {
            e.preventDefault();
            ($(this).parent()).parent().remove();
          })
        </script>

But with this code I can only remove the big and the yellow One stays.

Have you any idea ?
Thank you 🙂

Answer

Answer by Vapire

Vapire

$('.ligne_suppr a').click(function(e) {
  e.preventDefault();
  var parent = $(this).parent().parent();  // parent <tr> of the anchor tag
  var previous = parent.prev();        // <tr> before the parent <tr>

  parent.remove();
  previous.remove();
});

Answer

Answer by Starx

Starx

This is basically going to tough to do when you dont have a specific way to select the two rows.

Create a global javascript function to remove the elements by taking the element’s id

function deleteRows(row, yellow) {
    row = document.getElementById(row);    
    row.parentNode.removeChild(row);

    yellow = document.getElementById(yellow);
    yellow.parentNode.removeChild(yellow);
}

Using jQuery you can do something like this

$(".ligne_suppr a").click(function(e) {
    e.preventDefault();
    var toprow = $(this).closest("tr");
    toprow.prev().remove(); // remove the yellow
    toprow.remove(); // remove the row
});

Question 10

Question by Java

Java

I have a very long table in my webpage. When I print it, it looks that the last row of the table is in the one page ( only in the top of the page ). The rest of the page is blank. On the next page I have nest table. I do not know, why next table is not in the bottom of the last row of first page.

In HTML looks in following way:

<table align="left" cellspacing="0" cellpadding="0" border="1">
  <thead>
    <tr>....</tr>
  </thead>
  <tbody>
    <tr>...</tr>
  </tbody>
</table>

<table align="center" width="800" cellspacing="0" cellpadding="0" border="1" style="margin: 0 auto 0 auto; page-break-inside: avoid;">
  <tbody>
    <tr>
      <td align="left" width="200">xxx</td>
      <td align="right" width="200">xxx</td>
      <td align="right" width="200">xxx</td>
      <td align="right" width="200">x</td>
    </tr>
    <tr>
      <td align="left" width="200">
      <td align="right" width="200">
      <td align="right" width="200">
      <td align="right" width="200">
    </tr>
    <tr></tr>
</table>

CSS:

background-color: white;
border: 1px solid #000000;
border-collapse: collapse;
border-spacing: 0;
font-size: 10px;
vertical-align: middle;

Answer

Answer by Starx

Starx

You can control the style-sheet used for print separately using

@media print {
   ....
}

Since you table is breaking inside, you can disable that using

@media print {
   table {
       page-break-inside: avoid;
   }
}

Tag: table

Filtering table rows based on tags in the last coloumn

Question by DJDavid98

Answer by Starx

Tables vs Div vs Spans

Question by samyb8

Answer by Starx

Forcing <table> Columns to a Fixed Width; Prevent Automatic Expand

Question by Chad Decker

Answer by Starx

table height in percentage not working

Question by user1483487

Answer by Starx

How to stretch this CSS menu to 100%

Question by John Smith

Answer by Starx

Is there a way to take off the style off a certain table?

Question by user1250526

Answer by mert

Answer by Starx

delete table row with javascript

Question by Craig

Answer by Starx

Is there any research/data that shows DIV (with CSS) is faster than TABLE?

Question by deathlock

Answer by Starx

Read this article. This approaches different then articles normally do.

How to Remove or add 2 rows in a table

Question by Mehdi

Answer by Vapire

Answer by Starx

Printing HTML page

Question by Java

Answer by Starx

Please fill the form - I will response as fast as I can!