Select random visible row from table and clone it (with JS/jQuery)

Question

I'm trying to get one random row from an array which is composed of 100 rows. Some are hidden, other are visible.

My aim is to get a random visible row, and clone it in another table. (visible and hidden row are classified, that's why I need that !)

My code:

<table id="Random">
</table>

<table id="Classified">
    <tr id="Row1" style="display:none">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr id="Row2">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>

    <tr id="Row3" style="display:none">
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>

    <tr id="Row4">
        <td>13</td>
        <td>21</td>
        <td>32</td>
        <td>43</td>
    </tr>

    <tr id="Row5">
        <td>15</td>
        <td>26</td>
        <td>37</td>
        <td>48</td>
    </tr>
</table>    


<script>
    $("#Random").html("");
    var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length) + 1;
    var identifiedRow = $('#Classified tr').eq(randomtd)[0];

    $("#Random").html(identifiedRow);    
</script>

For now, it will take the lenght of every td... So sometime I can clone a visible td, and other time, it will clone an hidden td. — Anonymous
– Anonymous, Commented Sep 21, 2017 at 14:45

Shiladitya · Accepted Answer · 2017-09-21 15:04:36Z

1

Here you go with a solution https://jsfiddle.net/1hok7xme/

$("#Random").html("");
   
$('#Classified tr').each(function(){
  if($(this).is(':visible')){
    $("#Random").append(`<tr>${$(this).html()}</tr>`);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Random Table:
<table id="Random">
</table>

<br/>
Classified Table:
<table id="Classified">
    <tr id="Row1" style="display:none">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr id="Row2">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>

    <tr id="Row3" style="display:none">
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>

    <tr id="Row4">
        <td>13</td>
        <td>21</td>
        <td>32</td>
        <td>43</td>
    </tr>

    <tr id="Row5">
        <td>15</td>
        <td>26</td>
        <td>37</td>
        <td>48</td>
    </tr>
</table>

Hope this will help you.

answered Sep 21, 2017 at 15:04

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anonymous Over a year ago

This also works. But it takes every visible rows. With my code, I'm trying to random one. :o

gaetanoM · Accepted Answer · 2017-09-21 16:40:25Z

0

Your issue is in these lines:

var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length)+1;
var identifiedRow = $('#Classified tr').eq(randomtd)[0];

Change them to:

var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd)[0];

jQuery .eq() requires an integer indicating the 0-based position of the element.

$("#Random").html("");
var randomtd = Math.floor(Math.random() * $('#Classified tr:visible').length);
var identifiedRow = $('#Classified tr:visible').eq(randomtd);

//$("#Random").html(identifiedRow);
$("#Random").append(identifiedRow.clone());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Random table: <br/>
<table id="Random">
</table>
Classified table: <br/>
<table id="Classified">
    <tr id="Row1" style="display:none">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>

    <tr id="Row2">
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
    </tr>

    <tr id="Row3" style="display:none">
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>

    <tr id="Row4">
        <td>13</td>
        <td>21</td>
        <td>32</td>
        <td>43</td>
    </tr>

    <tr id="Row5">
        <td>15</td>
        <td>26</td>
        <td>37</td>
        <td>48</td>
    </tr>
</table>

edited Sep 21, 2017 at 16:40

answered Sep 21, 2017 at 14:53

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

2 Comments

Anonymous Over a year ago

That's work, but it seems to cut/paste the line instead of copy/paste. Maybe with clone ? $("#Random").clone().append(identifiedRow); ?

gaetanoM Over a year ago

@OverSu If you don't want to cut/paste but copy/paste the row: $("#Random").append(identifiedRow.clone());. Snippet updated. Let me know.

Anonymous · Accepted Answer · 2017-09-21 16:11:29Z

0

Ok, got it ! Thanks to everyone. Each+Array. ;)

        var arrayTmp = [];
            var i = 0;
            $('.Monstres tbody tr').each(function(){
              if($(this).is(':visible')){
                arrayTmp[i] = '<tr>'+$(this).html()+'</tr>';
                i++;
              }
            });
            var arrayTmp = arrayTmp[Math.floor(Math.random()*arrayTmp.length)];
            $(".Random table").append(arrayTmp);

answered Sep 21, 2017 at 16:11

Anonymous

771 silver badge7 bronze badges

Collectives™ on Stack Overflow

Select random visible row from table and clone it (with JS/jQuery)

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related