用div分隔数字

时间:2018-09-04 05:38:47

标签: javascript jquery

我正在处理一个简单的表,该表正在使用循环生成数据,我在生成随机数方面遇到问题,我想要使用div ex来合理地生成。从<td>09897</td><td><div>0</div><div>0</div><div>8</div><div>9</div><div>7</div></td>,我设法以某种方式生成数字,但是不知道如何将它们分开。

希望你能帮助我。

谢谢

var dataNum = 30;

for (let t = 1; t <= dataNum; t++) {

  $('table tbody').append('<tr>');
  for (var j = 0; j < 2; j++) {
    if (j == 0) {
      $('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
    } else if (j == 1) {
      $('table tbody').append('<td>' + (Math.floor(Math.random() * 10000) + 90000) + '</td>');
    }
  }
  $('table tbody').append('</tr>');

}



function todayDate() {
  var d = new Date(),
    month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;

  return [year, month, day].join('');
}

function deci(number) {
  var num = null;
  if (number < 10) {
    num = '000' + number;
  } else if (number > 9 && number < 100) {
    num = '00' + number;
  } else if (number > 99 && number < 1000) {
    num = '0' + number;
  } else {
    num = number;
  }
  return num;
}
table th, table td{
  width: 150px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Num</th>
      <th>Random</th>
    </tr>
    
  </thead>
  <tbody></tbody>
</table>

3 个答案:

答案 0 :(得分:2)

使用此功能将生成的号码转换为所需的html,然后将其插入到td标记(convert("09897", "div"))中:

function convert(num, tag){return "<"+tag+">"+(num+"").split("").join("</"+tag+"><"+tag+">")+"</"+tag+">"}

答案 1 :(得分:1)

因此(Math.floor(Math.random() * 10000) + 90000)为您提供了随机数。现在,您需要每个数字(可以通过.toString().split("")使用),然后需要为每个数字将<div>包裹起来-可以通过.map(t => "<div>" + t + "</div>")完成。然后,您可以使用.join("")连接这些字符串。

var dataNum = 30;

for (let t = 1; t <= dataNum; t++) {

  $('table tbody').append('<tr>');
  for (var j = 0; j < 9; j++) {
    if (j == 0) {
      $('table tbody').append('<td>' + todayDate() + '-' + deci(t) + '</td>');
    } else if (j == 1) {
      $('table tbody').append('<td>' + 
      (Math.floor(Math.random() * 10000) + 90000)
      .toString()
      .split("")
      .map(t => "<div>" + t + "</div>")
      .join("") + 
      '</td>');
    }
  }
  $('table tbody').append('</tr>');

}



function todayDate() {
  var d = new Date(),
    month = '' + (d.getMonth() + 1),
    day = '' + d.getDate(),
    year = d.getFullYear();

  if (month.length < 2) month = '0' + month;
  if (day.length < 2) day = '0' + day;

  return [year, month, day].join('');
}

function deci(number) {
  var num = null;
  if (number < 10) {
    num = '000' + number;
  } else if (number > 9 && number < 100) {
    num = '00' + number;
  } else if (number > 99 && number < 1000) {
    num = '0' + number;
  } else {
    num = number;
  }
  return num;
}
table th,
table td {
  width: 150px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Num</th>
      <th>Random</th>
    </tr>

  </thead>
  <tbody></tbody>
</table>

参考文献:

String#split-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

Array#join-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

Array#map-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

答案 2 :(得分:0)

var x=90987;
x=x.toString();
for(var y=0; y<x.length; y++)
{
    console.log(x[y]);
}