从表中选择随机可见行并克隆它（使用 JS/jQuery）答案

【问题标题】：Select random visible row from table and clone it (with JS/jQuery)从表中选择随机可见行并克隆它（使用 JS/jQuery）
【发布时间】：2017-09-21 14:35:14
【问题描述】：

我试图从一个由 100 行组成的数组中获取一个随机行。有些是隐藏的，有些是可见的。

我的目标是获得一个随机可见行，并将其克隆到另一个表中。（可见行和隐藏行是分类的，这就是我需要它的原因！）

我的代码：

<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>

【问题讨论】：

您当前的代码有问题吗？
现在，它会占用每个 td 的长度......所以有时我可以克隆一个可见的 td，而其他时候，它会克隆一个隐藏的 td。

标签： javascript jquery html arrays random

【解决方案1】：

这里有一个解决方案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>

希望这会对你有所帮助。

【讨论】：

这也有效。但它需要每一个可见的行。使用我的代码，我正在尝试随机一个。 :o

【解决方案2】：

您的问题在于以下几行：

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

将它们更改为：

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

jQuery .eq() 需要一个整数来指示元素从 0 开始的位置。

$("#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>

【讨论】：

这是工作，但它似乎剪切/粘贴行而不是复制/粘贴。也许与克隆？ $("#Random").clone().append(identifiedRow); ?
@OverSu 如果您不想剪切/粘贴而是复制/粘贴该行：$("#Random").append(identifiedRow.clone());。片段更新。告诉我。

【解决方案3】：

好的，知道了！谢谢大家。每个+阵列。 ;)

        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);

【讨论】：