Question

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

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

有关如何通过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>

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

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

Answer 1

如果您有另一张桌子可以放入获胜者，

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

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

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

http://jsfiddle.net/sMPQS/

Answer 2

我使用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>

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

2 个答案: