<table id="_4941__ctl0" class="Answer" cellpadding="10" border="0">
        <tr>
            <td>
                <input id="_4941__ctl0_0" type="radio" name="_4941:_ctl0" value="22665" /><label
                    for="_4941__ctl0_0">1</label></td>
            <td>
                <input id="_4941__ctl0_1" type="radio" name="_4941:_ctl0" value="22666" /><label
                    for="_4941__ctl0_1">2</label></td>
            <td>
                <input id="_4941__ctl0_2" type="radio" name="_4941:_ctl0" value="22667" /><label
                    for="_4941__ctl0_2">3</label></td>
            <td>
                <input id="_4941__ctl0_3" type="radio" name="_4941:_ctl0" value="22668" /><label
                    for="_4941__ctl0_3">4</label></td>
            <td>
                <input id="_4941__ctl0_4" type="radio" name="_4941:_ctl0" value="22669" /><label
                    for="_4941__ctl0_4">5</label></td>
            <td>
                <input id="_4941__ctl0_5" type="radio" name="_4941:_ctl0" value="22670" /><label
                    for="_4941__ctl0_5">6</label></td>
            <td>
                <input id="_4941__ctl0_6" type="radio" name="_4941:_ctl0" value="22671" /><label
                    for="_4941__ctl0_6">7</label></td>
            <td>
                <input id="_4941__ctl0_7" type="radio" name="_4941:_ctl0" value="22672" /><label
                    for="_4941__ctl0_7">8</label></td>
            <td>
                <input id="_4941__ctl0_8" type="radio" name="_4941:_ctl0" value="22673" /><label
                    for="_4941__ctl0_8">9</label></td>
        </tr>
    </table>
 <script type="text/javascript">
function rnd(min,max){return Math.floor(Math.random()*(max-min+1)+min);}
var tr=document.getElementById('_4941__ctl0').rows[0],cells=tr.cells.length;
for(var i=0;i<cells;i++)tr.insertBefore(tr.cells[i],tr.cells[rnd(0,cells-1)]);
</script>已经实现了 在一行中的随机排列
如果是如果是多行应该怎么改怎么用javascript实现随机排列?以下是HTML代码: <table id="_5680__ctl0" class="Answer" border="0">
                                <tr>
                                    <td>
                                        <input id="_5680__ctl0_0" type="checkbox" name="_5680:_ctl0:0" /><label for="_5680__ctl0_0">中国</label></td>
                                    <td>
                                        <input id="_5680__ctl0_5" type="checkbox" name="_5680:_ctl0:5" /><label for="_5680__ctl0_5">澳大利亚</label></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="_5680__ctl0_1" type="checkbox" name="_5680:_ctl0:1" /><label for="_5680__ctl0_1">美国</label></td>
                                    <td>
                                        <input id="_5680__ctl0_6" type="checkbox" name="_5680:_ctl0:6" /><label for="_5680__ctl0_6">德国</label></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="_5680__ctl0_2" type="checkbox" name="_5680:_ctl0:2" /><label for="_5680__ctl0_2">英国</label></td>
                                    <td>
                                        <input id="_5680__ctl0_7" type="checkbox" name="_5680:_ctl0:7" /><label for="_5680__ctl0_7">阿联酋</label></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="_5680__ctl0_3" type="checkbox" name="_5680:_ctl0:3" /><label for="_5680__ctl0_3">法国</label></td>
                                    <td>
                                        <input id="_5680__ctl0_8" type="checkbox" name="_5680:_ctl0:8" /><label for="_5680__ctl0_8">加拿大</label></td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="_5680__ctl0_4" type="checkbox" name="_5680:_ctl0:4" /><label for="_5680__ctl0_4">日本</label></td>
                                    <td>
                                        <input id="_5680__ctl0_9" type="checkbox" name="_5680:_ctl0:9" /><label for="_5680__ctl0_9">巴西</label></td>
                                </tr>
                            </table>

解决方案 »

  1. <table id="_5680__ctl0" class="Answer" border="0">
                                    <tr>
                                        <td>
                                            <input id="_5680__ctl0_0" type="checkbox" value="中国" name="_5680:_ctl0:0" /><label for="_5680__ctl0_0">中国</label></td>
                                        <td>
                                            <input id="_5680__ctl0_5" type="checkbox" value="澳大利亚" name="_5680:_ctl0:5" /><label for="_5680__ctl0_5">澳大利亚</label></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="_5680__ctl0_1" type="checkbox" name="_5680:_ctl0:1" /><label for="_5680__ctl0_1">美国</label></td>
                                        <td>
                                            <input id="_5680__ctl0_6" type="checkbox" name="_5680:_ctl0:6" /><label for="_5680__ctl0_6">德国</label></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="_5680__ctl0_2" type="checkbox" name="_5680:_ctl0:2" /><label for="_5680__ctl0_2">英国</label></td>
                                        <td>
                                            <input id="_5680__ctl0_7" type="checkbox" name="_5680:_ctl0:7" /><label for="_5680__ctl0_7">阿联酋</label></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="_5680__ctl0_3" type="checkbox" name="_5680:_ctl0:3" /><label for="_5680__ctl0_3">法国</label></td>
                                        <td>
                                            <input id="_5680__ctl0_8" type="checkbox" name="_5680:_ctl0:8" /><label for="_5680__ctl0_8">加拿大</label></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <input id="_5680__ctl0_4" type="checkbox" name="_5680:_ctl0:4" /><label for="_5680__ctl0_4">日本</label></td>
                                        <td>
                                            <input id="_5680__ctl0_9" type="checkbox" name="_5680:_ctl0:9" /><label for="_5680__ctl0_9">巴西</label></td>
                                    </tr>
                                </table>
    <script type="text/javascript">
    //基本思想就是获取所有td存入数组中,对数组遍历,遍历的代码块实现从数组中随机出数组其的一个td,然后当前td和随机到的td互换位置
    function rnd(min,max){return Math.floor(Math.random()*(max-min+1)+min);}
    var tds=document.getElementById('_5680__ctl0').getElementsByTagName('td'),cells=tds.length,currentTR,currentTD,rndTR,rndTD,cellIndex;
    for(var i=0;i<cells;i++){
      rndTD=tds[rnd(0,cells-1)];//随机到的td
      cellIndex=rndTD.cellIndex;//获取该随机td的tr父节点
      rndTR=rndTD.parentNode;//遍历到的当前td
      currentTD=tds[i];
      currentTR=currentTD.parentNode;
      rndTR.replaceChild(currentTD,rndTD);//当前td替换掉随机到的td的位置
      if(cellIndex==0)currentTR.insertBefore(rndTD, currentTR.cells[0]);//随机到的td插入到当前td位置
      else currentTR.appendChild(rndTD);
    }
    </script>
      

类似问题 »