[jQuery] Waarom wordt colspan genegeerd? - Softwareontwikkeling

donderdag 27 november 2008 18:21

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik schrijf een scriptje om achter de titel van een artikel een "meer/minder" link te zetten. Als je erop klikt, moet de onderliggende tr worden getoond:

HTML:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$(document).ready(function() {
  $('tr[id^=more_]').hide();
  $('td[id^=story_]').append('<span>more</span>');
    
   $('table').click( function(ev){
        var $el=$(ev.target);
        if ( $el.is('span') ){
           var id=$el.parent().get(0).id;
           var i=id.substring(id.length-1,id.length);
           $('#more_'+i).slideDown('slow');
        }
    });
});
</script>

</head>
<body>
<table border="1">
  <tr>
    <td id="story_1">title of story 1</a></td>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr id="more_1">
    <td colspan="3">this is the body of the story bla bla...</td>
  </tr>
  <tr>
    <td id="story_2">title of story 2</td>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr id="more_2">
    <td colspan="3">this is the body of the story bla bla...</td>
  </tr>
</table>
</body>
</html>

Mijn vraag is: als je dit runt, heeft de verschijnende rij geen colspan van 3 (maar van 1). Waarom is dit?

donderdag 27 november 2008 18:31

Acties:

0 Henk 'm!

Sebazzz

3dp

Omdat slidedown er een display: block ipv van display:table-row van maakt

(kijk maar in Firebug)
Dat heb ik hier opgelost door de contents van de tabelcel te verbergen door op de inliggende elementen een display: none te doen. De tabelcel krijgt dan nul hoogte.

Je zou dus zoiets kunnen doen (pseudocode):

JavaScript:

$(document).ready(function() {
  $('tr[id^=more_] td *').hide();
  $('td[id^=story_]').append('<span>more</span>');
    
   $('table').click( function(ev){
        var $el=$(ev.target);
        if ( $el.is('span') ){
           var id=$el.parent().get(0).id;
           var i=id.substring(id.length-1,id.length);
           $("tr[id^=more_"+i+"] td *").slideDown('slow');
        }
    });
});

Het beste is om de elementen in de more_ tabelcel in een span te verpakken, dan kan je simpelweg dit doen (dat voorkomt dat alle elementen erin apart naar beneden schuiven en een ongewenste display:block krijgen):

JavaScript:

$(document).ready(function() {
  $('tr[id^=more_] td span').hide();
  $('td[id^=story_]').append('<span>more</span>');
    
   $('table').click( function(ev){
        var $el=$(ev.target);
        if ( $el.is('span') ){
           var id=$el.parent().get(0).id;
           var i=id.substring(id.length-1,id.length);
           $("tr[id^=more_"+i+"] td span").slideDown('slow');
        }
    });
});

[ Voor 64% gewijzigd door Sebazzz op 27-11-2008 18:40 ]

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

donderdag 27 november 2008 19:13

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Sebazzz, thanks! ...moet je ook maar weten

Zou iemand mij ook op weg kunnen helpen met het doen veranderen van de "more" in een "less" link (die, als je klikt, de tr laat verdwijnen?). Ik heb er moeite mee om de codeflow te bepalen; heb nu dit:

HTML:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script>
$(document).ready(function() {
  $('tr[id^=more_] td span').hide();
  $('td[id^=story_]').append('<span>more</span>');
  $('table').click(function(ev) {
    var $el = $(ev.target);
    if ($el.is('span')) {
      var id = $el.parent().get(0).id;
      var i = id.substring(id.length - 1, id.length);
      $("tr[id^=more_"+ i +"] td span").slideDown('fast');
    }
  });
});
</script>

</head>
<body>
<table border="1">
  <tr>
    <td id="story_1">title of story 1</a></td>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr id="more_1">
    <td colspan="3"><span>this is the body of the story bla bla...</span></td>
  </tr>
  <tr>
    <td id="story_2">title of story 2</td>
    <td>foo</td>
    <td>bar</td>
  </tr>
  <tr id="more_2">
    <td colspan="3"><span>this is the body of the story bla bla...</span></td>
  </tr>
</table>
</body>
</html>

[ Voor 93% gewijzigd door Verwijderd op 27-11-2008 19:21 ]

donderdag 27 november 2008 20:07

Acties:

0 Henk 'm!

Sebazzz

3dp

Je kan bijvoorbeeld de span een class meegeven.
Bijvoorbeeld

JavaScript:

1	append("<span class=\"moreless_span\">more</span>");

en dan via JQuery erop selecteren in je function(){}

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

donderdag 27 november 2008 22:06

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik heb nu dit, maar omdat this niet naar de more link verwijst, weet ik niet hoe ik "more" in "less" moet veranderen:

JavaScript:

$(document).ready(function() {
  $('tr[id^=more_] td span').hide();
  $('td[id^=story_]').append('<span id="link">more</span>');
  $('table').click(function(ev) {
    var $el = $(ev.target);
    if ($el.is('span')) {
      var id = $el.parent().get(0).id;
      var i = id.substring(id.length - 1, id.length);
      $("tr[id^=more_"+ i +"] td span").slideToggle('fast', function () {
        var existing_id, suffix, new_id;
        existing_id = $(this).attr('id');
        suffix = existing_id.slice(existing_id.indexOf('_'));
        new_id = 'less' + suffix;
        $(this).attr('id', new_id);
      });
    }
  });
});

zaterdag 29 november 2008 01:25

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

* kick

*

zaterdag 29 november 2008 12:40

Acties:

0 Henk 'm!

Blaise

Waarom doe je het niet met classes? Dan kan je heel eenvoudig jQuery's hasClass, addClass en removeClass gebruiken.

Over je probleem: je hoeft toch niet per se 'this' te gebruiken, je kan ook een nieuwe query maken.