说明：需要你自己去找个Jquery引用到当前页面就可以了
<html> <head> <script src="https://common.cnblogs.com/scripts/jquery-2.2.0.min.js"></script> <script> function js() { //$("tr").children("td")[3].css("background-color","red"); //$("#td1").css("background-color","#516831"); var a=b=c=0; a=$("#z").val(); b=$("#k").val(); c=$("#r").val(); $("#rqs").html(c); if(a>b)setcolor("td1"); if(a==b)setcolor("td2"); if(a<b)setcolor("td3"); if(a+c>b)setcolor("rtd1"); if(a+c==b)setcolor("rtd2"); if(a+c<b)setcolor("rtd3"); } function setcolor(id){ $("#"+id).css("background-color","#516831"); } $("#b1").hide(); function zh(){ var str="",str2=""; var a1=0,a2=0,b1=0,b2=0,c=0; a1=$("#z1").val(); a2=$("#z2").val(); b1=$("#k1").val(); b2=$("#k2").val(); c=$("#r").val(); $("#chk").html(""); $("#chk").append('胜<input type=checkbox value=s checked=checked onclick="chk()" /> 负<input checked=checked type=checkbox value=f onclick="chk()"/> 平<input checked=checked type=checkbox value=p onclick="chk()" />'); $("#chk").append(" "); $("#chk").append(" "); $("#chk").append(" "); $("#chk").append(" "); var spf; for(i=a1;i<=a2;i++){ for(j=b1;j<=b2;j++){ if((1*i)>j)spf="s"; if((1*i)==j)spf="p"; if((1*i)<j)spf="f"; str += "<tr class='"+spf+"'><td>"+i+" </td><td>"+j+" </td>"; if(i>j){str += "<td style='background-color:#516831;'> </td>"}else{str += "<td> </td>";} if(i==j){str += "<td style='background-color:#516831;'> </td>"}else{str += "<td> </td>";} if(i<j){str += "<td style='background-color:#516831;'> </td>"}else{str += "<td> </td>";} str += "<td> "+c+"</td>"; //alert("i="+i+" j="+j+","+(1*i+c*1)+" (i+c)>j :" +((i+c)>j)); if((1*i+c*1)>j){str += "<td style='background-color:#516831;'> </td>"}else{str += "<td> </td>";} if((1*i+c*1)==j){str += "<td style='background-color:#516831;'> </td>"}else{str += "<td> </td>";} if((1*i+c*1)<j){str += "<td style='background-color:#516831;'> </td>"}else{str += "<td> </td>";} str+="</tr>"; str2 += "<tr id='1_"+i+j+"' class='"+spf+"2'><td rowspan='2'>"+i+" </td><td rowspan='2'>"+j+" </td><td>0</td>"; if(i>j){str2 += "<td style='background-color:#516831;'> </td>"}else{str2 += "<td> </td>";} if(i==j){str2 += "<td style='background-color:#516831;'> </td>"}else{str2 += "<td> </td>";} if(i<j){str2 += "<td style='background-color:#516831;'> </td>"}else{str2 += "<td> </td>";} str2 += "</tr><tr id='2_"+i+j+"' class='"+spf+"2'>"; str2 += "<td> "+c+"</td>"; if((1*i+c*1)>j){str2 += "<td style='background-color:#516831;'> </td>"}else{str2 += "<td> </td>";} if((1*i+c*1)==j){str2 += "<td style='background-color:#516831;'> </td>"}else{str2 += "<td> </td>";} if((1*i+c*1)<j){str2 += "<td style='background-color:#516831;'> </td>"}else{str2 += "<td> </td>";} str2+="</tr>"; $("#chk").append(i+":"+j+"<input id="+i+j+" type=checkbox i="+i+" j="+j+" checked onclick='chk()' /> "); } } $("#pp1").html(""); $("#pp2").html(""); $("#pp1").append(str); $("#pp2").append(str2); $('input[type="checkbox"]:checked').each( function() { $(this).attr("checked","true"); } ); } function chk() { $(".s").hide(); $(".p").hide(); $(".f").hide(); $(".s2").hide(); $(".p2").hide(); $(".f2").hide(); //$("#s3").hide(); //$("#p3").hide(); //$("#f3").hide(); //$(".sh").hide(); $('input[type="checkbox"]:checked').each( function() { $("."+$(this).val()).show(); //alert($(this).attr("i")+$(this).attr("i")); //alert($(this).attr("id")); //$("."+$(this).val()+"2").show(); $("#1_"+$(this).attr("i")+$(this).attr("j")).show(); $("#2_"+$(this).attr("i")+$(this).attr("j")).show(); } ); } </script> </head> <body> 主队：<input id='z' type=text /> 客队：<input id='k' type=text /> 让球：<input id='r' type=text value="-1" /> <button id='b1' style="display:none" onclick="js();">计算</button> <br /> 主队：从<input id='z1' type=text style="40px" value="0" /> 到 <input id='z2' value="2" type=text style="40px" > 客队：从<input id='k1' type=text style="40px" value="0"/> 到 <input id='k2' value="2" type=text style="40px" > <button id='b1' onclick="zh();">计算所有组合</button> <button id='b1' onclick="alert($('#sc').html());">计算所有组合</button> <br /><br /> <div id='chk'> 胜<input type=checkbox value=s onclick="chk()" /> 负<input type=checkbox value=f onclick="chk()"/> 平<input type=checkbox value=p onclick="chk()" /> </div> <br /> <table id='tab'> <tr> <th class="fs16 br0" colspan="2">对阵</th> <th class="fs16 br0" colspan="3">胜平负</th> <th class="fs16" colspan="4">让球胜平负</th> </tr> <tr> <th class="t1 bt0">主队</th> <th class="t1 br0 bt0">客队</th> <th class="t3 br1 bt0">主胜</th> <th class="t3 br1 bt0">平局</th> <th class="t3 br0 bt0">主负</th> <th class="t3 br1 bt0 concede">让球</th> <th class="t3 br1 bt0">主胜</th> <th class="t3 br1 bt0">平局</th> <th class="t3 br0 bt0">主负</th> </tr> <tbody id="pp1"> <tr> <td>主队</td> <td>客队</td> <td id=td1> </td> <td id=td2> </td> <td id=td3> </td> <td id=rqs> </td> <td id=rtd1> </td> <td id=rtd2> </td> <td id=rtd3> </td> </tr> </tbody> </table> <br /><br /> <table id='tab2' style="300px;left:450px;"> <tr> <th class="fs16 br0" colspan="2">对阵</th> <th class="fs16" colspan="4">让球胜平负</th> </tr> <tr> <th class="t1 bt0">主队</th> <th class="t1 br0">客队</th> <th class="t3 br1 bt0 concede">让球</th> <th class="t3 br1 bt0">主胜</th> <th class="t3 br1 bt0">平局</th> <th class="t3 br0 bt0">主负</th> </tr> <tbody id="pp2"> <tr class=sh> <td rowspan="2">主队</td> <td rowspan="2">客队</td> <td id=td1> </td> <td id=td2> </td> <td id=td3> </td> <td id=td3> </td> </tr> <tr class=sh> <td id=rqs> </td> <td id=rtd1> </td> <td id=rtd2> </td> <td id=rtd3> </td> </tr> </tbody> </table> </body> </html> <style> table { border-1px; border-color:#f00; border-style:solid; text-align:center; font-Size:12px; 400px; position: absolute; top:110px; } th{ border-thin; border-color:#f00; border-style:solid; height:25px; } td { border-1px; border-color:#f00; border-style:solid; text-align:center; font-Size:12px; } </style>