Question

使用这个html：

<html>
<head>
<meta charset="UTF-8">
<title>Bonoloto</title>
<script src="bonoloto.js"></script>
<style>
    table {border-collapse: collapse;}
    td{border: 1px solid #000000; text-align: center; width: 6%;}
</style>
</head>
<body>
<script>
    tables();
</script>
</body>
</html>

这个javascript：

var counter = 0;
var nr1 = Math.floor(Math.random() * 49 + 1),
nr2 = Math.floor(Math.random() * 49 + 1),
nr3 = Math.floor(Math.random() * 49 + 1),
nr4 = Math.floor(Math.random() * 49 + 1),
nr5 = Math.floor(Math.random() * 49 + 1);

document.write("Numbers: "+nr1+" "+nr2+" "+nr3+" "+nr4+" "+nr5);

function tables(){

document.write("<table>");
         for(i = 1; i < 50; i++) {
                if(counter == 10) {
                    counter = 0;
                    document.write("<tr>");
                }
                if(i==nr1){
                    document.write("<td style='background-color: cadetblue'>" + i + "</td>");
                }else{
                    document.write("<td>" + i + "</td>");
                }

                if(counter == 10) {
                    counter = 0;
                    document.write("</tr>");
                }
                counter++;
            }

document.write("</table>");
}

这是输出：

colored table 我必须突出强调所有数字，如25。数字是随机生成的，目的是在表格中突出显示它们。我被困在这里：

                if(i==nr1){
                    document.write("<td style='background-color: cadetblue'>" + i + "</td>");
                }else{
                    document.write("<td>" + i + "</td>");
                }

如果我放置更多if语句，表格列将为＆＃34;乘以＆＃34;。我无法正常工作......

Answer 1

使用五个随机数的数组代替nrX s。然后在if中，检查数组是否包含i。这样的事情：

＆＃13;

var counter = 0,
    randoms = [],
    n;
for (n = 0; n < 5; n++) {
    randoms.push(Math.floor(Math.random() * 49 + 1));
}

function tables(){  
    document.write("<table>");
    for(var i = 1; i < 50; i++) {
        if(counter == 10) {
            counter = 0;
            document.write("<tr>");
        }
        if (randoms.indexOf(i) > -1) {
            document.write("<td style='background-color: cadetblue'>" + i + "</td>");
        } else {
            document.write("<td>" + i + "</td>");
        }
        if (counter == 10) {
            counter = 0;
            document.write("</tr>");
        }
        counter++;
    }
    document.write("</table>");
}
tables();

＆＃13;

＆＃13; 请注意，document.write被认为是一种不好的做法，而是使用一些DOM操作方法。在你的情况下，HTMLTableElement Interface似乎是合适的。

您可以改进代码，因为现在可以将更多的随机数添加到数组中。

Answer 2

你可以试试这个：

var counter = 0;
var randomNumbers = [];
for (var i = 0; i <= 5; i++) {
	randomNumbers.push( Math.floor(Math.random() * 49 + 1));
};
document.write("Numbers: ");
for (var i = randomNumbers.length - 1; i >= 0; i--) {
	document.write(randomNumbers[i]+", ");
};

function tables(){

	document.write("<table>");
	for(i = 1; i < 50; i++) {
		var found = false;
		if(counter == 10) {
			counter = 0;
			document.write("<tr>");
		}

		for (var j = randomNumbers.length - 1; j >= 0; j--) {
			if(i == randomNumbers[j]){
				document.write("<td style='background-color: cadetblue'>" + i + "</td>");
				found = true;
				break;
			}
		};
		if(!found){
			document.write("<td>" + i + "</td>");
		}

		if(counter == 10) {
			counter = 0;
			document.write("</tr>");
		}
		counter++;

	}

	document.write("</table>");
}
tables();

Answer 3

试试这个：

<强> HTML：

<div id="container"></div>

JQUERY （正如您所看到的那样让事情变得更简单）：

  var colors=['red','yellow','blue','green'];
  var i;
  $("#container").append("<table></table>");
  var tds="";
  for(i=1;i<=50;i++){
    if(i%10 == 0){
      tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>"
      $("table").append("<tr>"+tds+"</tr>");
      tds="";
    }
    else{
      tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>";
    }
  }

<强> CSS：

table,td{
    border:solid 1px;
}
table{
    border-collapse:collapse;
}
td{
    width:6%;
}

Live FIDDLE

用随机彩色数字制作一张桌子

3 个答案: