从表中选择随机行，然后删除该行并使用该行创建一个新表？

I found some code that helped me get pretty close. Kudos to daiscog for that! Here is what I'm trying to do. There is a table with rows of entries for a giveaway. I want to be able to click a button and remove that row from the table and and generate a new table on the fly with that random row that was picked form the primary table.

我找到了一些帮助我变得非常接近的代码。感谢daiscog！这是我想要做的。有一个包含赠品的条目行的表格。我希望能够单击一个按钮并从表中删除该行，并使用从主表中选取的随机行动态生成一个新表。

Right now the code below selects a random row and highlights it in dark blue. Which is great. Issue is it also counts the <thead> and <tfoot> as rows in the random pick, ideally it wouldn't. Which isn't a huge deal. But can be once I get working what I'd like to. Issue is right now when the logs of entries gets really long it's hard to keep track of who was picked first.

现在，下面的代码选择一个随机行，并以深蓝色突出显示。哪个好。问题是它还将和计为随机选择中的行，理想情况下它不会。这不是什么大不了的事。但是，一旦我开始工作，我就会这样做。现在问题是当条目的日志变得很长时，很难跟踪谁先被选中。

Any ideas on how to accomplish this via Javascript?

有关如何通过Javascript实现此目的的任何想法？

    <table id="cp_logs_table" class="widefat" style="background-color:#333;color:#ddd;font-weight:bold;margin:15px;">
    <thead><tr><th scope="col">Name [Username]</th><th scope="col">Points</th><th scope="col">Entry Type</th><th scope="col">Time</th></tr></thead>
    <tfoot><tr><th scope="col">Name [Username]</th><th scope="col">Points</th><th scope="col">Entry Type</th><th scope="col">Time</th></tr></tfoot>
    <tr>
    <td title="wolfkin">wolfkin [wolfkin]</td>
    <td>- 150</td>
    <td>
    Lottery Ticket
    </td>
    <td title="2011-10-14 17:20:29">11 hours ago</td>
    </tr><tr>
    <td title="dragon290513">dragon290513 [dragon290513]</td>
    <td>+ 5</td>
    <td>
    Video Entry
    </td>
    <td title="2011-10-14 01:42:30">1 day ago</td>
    </tr></table>

            <script>
            function cplottopickwinner() {      
             // get all TRs that are descendants of table#cp_logs_table:
             var tds = document.getElementById("cp_logs_table").getElementsByTagName("tr");
             // get a random int between 0 (inclusive) and tds.length (exclusive)
             var rand = Math.floor( Math.random() * tds.length );
             // highlight tr at that index
             tds[rand].style.backgroundColor = "#375297";
             //tds[rand].style.color = "#000";      
            }
            </script>

<a href="javascript:cplottopickwinner()">Pick Random Winner(s)</a>

I modified the function to the code below, but it's not populating the table with anything, but it's still highlighting the table row in blue. I'm sure I'm missing something simple to automatically remove that row and add it to the new table.

我将函数修改为下面的代码，但它没有用任何东西填充表格，但它仍然以蓝色突出显示表格行。我确定我遗漏了一些简单的东西，可以自动删除该行并将其添加到新表中。

    function cplottopickwinner() {      
     // get all TRs that are descendants of table#cp_logs_table:
     var tds = document.getElementById("cp_logs_table").getElementsByTagName("tr");
     // get a random int between 0 (inclusive) and tds.length (exclusive)
     var rand = Math.floor( Math.random() * tds.length );
     // highlight tr at that index
     tds[rand].style.backgroundColor = "#375297";
     //tds[rand].style.color = "#000";       
     jQuery("#cb_winners").fadeIn("slow");
     var html = tds[rand].html();
     tds[rand].remove();
     jQuery("#winners").append("<tr>"+html+"</tr>");
    }

2 个解决方案

#1

If you have another table to put in the winners,

如果你有另一张表放入获奖者，

<table>
    <thead><!-- .... --></thead>
    <tfoot><!-- .... --></tfoot>
    <tbody id="winners"></tbody>
</table>

Then you just have to append the whole <tr> to it, then it will disappear from old table because it is not cloned.

然后你只需将整个附加到它，然后它将从旧表中消失，因为它没有被克隆。

document.getElementById('winners').appendChild(trs[rand]);

http://jsfiddle.net/sMPQS/

#2

I made it using jQuery.. hope it's helpful.

我用jQuery做了..希望它有用。

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


<table id="cp_logs_table" class="widefat" style="background-color:#333;color:#ddd;font-weight:bold;margin:15px;">
    <thead><tr><th scope="col">Name [Username]</th><th scope="col">Points</th><th scope="col">Entry Type</th><th scope="col">Time</th></tr></thead>
    <tfoot><tr><th scope="col">Name [Username]</th><th scope="col">Points</th><th scope="col">Entry Type</th><th scope="col">Time</th></tr></tfoot>
    <tr>
        <td title="wolfkin">wolfkin [wolfkin]</td>
        <td>- 150</td>
        <td>Lottery Ticket</td>
        <td title="2011-10-14 17:20:29">11 hours ago</td>
        <td><input type='submit' value='MOVE' class='move'></td>
    </tr>
    <tr>
        <td title="dragon290513">dragon290513 [dragon290513]</td>
        <td>+ 5</td>
        <td>Video Entry</td>            
        <td title="2011-10-14 01:42:30">1 day ago</td>
        <td><input type='submit' value='MOVE' class='move'></td>
    </tr>
    </table>

<script>
$('.move').click(function(){
    var row = $(this).parent('td').parent('tr');
    var html = row.html();
    row.remove();
    $('#winners').append("<tr>"+html+"</tr>");
});
</script>

<table id='winners' ></table>

#1