Question

我正在处理一个显示随机数和一组数字的表，如果该随机数上存在一个类，则会添加一个类。

我想在类exist的每个元素之后重置编号，我设法在类exist中获取数字，但不知道如何更改该元素后面的数字。 / p>

所需的输出

希望你能理解我。

这是我的示例代码。

var td = 5;
var rows = 10;
exist(rows);

$('table tr th:not(:first-child)').html(convert('0123456789', 'div'));

function exist(rows) {
  for (let i = 1; i <= rows; i++) {
    var arrRandom = [];

    for (let b = 0; b < 5; b++) {
      var random = Math.floor(Math.random() * 10);
      arrRandom.push(random);
    }

    $('table tbody').append('<tr></tr>');

    for (let d = 0; d <= td; d++) {
      if (d == 0) {
        $('table tbody tr:last-child').append('<td>' + arrRandom + '</td>');
      } else {
        $('')
        var ar = [];
        for (let c = 0; c < 10; c++) {
          ar.push(i);
        }
        $('table tbody tr:last').append('<td>' + ar.toString().split(",").map(t => "<div>" + i + "</div>")
          .join("") + '</td>');
      }
    }

    for (let b = 0; b < arrRandom.length; b++) {
      $('table tbody tr:nth-child(' + i + ') td:nth-child(' + (b + 2) + ')').find("div:eq(" + arrRandom[b] + ")").addClass('exist').text(arrRandom[b]);
    }

  }
}

// CHANGE NUMBER OF ROWS
$('.result div').click(function() {
  $('table tbody tr').remove();
  $(this).addClass('active').siblings().removeClass('active');
  if ($(this).is(':first-child')) {
    rows = 10;
    exist(rows);
  } else if ($(this).is(':nth-child(2)')) {
    rows = 15;
    exist(rows);
  } else if ($(this).is(':nth-child(3)')) {
    rows = 20;
    exist(rows);
  }
});

function convert(num, tag) {
  return "<" + tag + ">" + (num + "").split("").join("</" + tag + "><" + tag + ">") + "</" + tag + ">"
}

var colNum = [];
for (let z2 = 0; z2 < td; z2++) {
  for (let z3 = 0; z3 < 10; z3++) {
    colNum = [];
    for (let z1 = 0; z1 < rows; z1++) {
      $('table tbody tr:nth-child(' + (z1 + 1) + ') td:nth-child(' + (z2 + 2) + ') div:nth-child(' + (z3 + 1) + ')').each(function(i) {
        if ($(this).hasClass('exist')) {
          colNum.push(z1 + 1);
        }
      });
    }
    // console.log(colNum);
  }
}

.canvas-container {
  display: inline-block;
  position: relative;
}

table div {
  width: 20px;
  float: left;
}

table div.exist {
  background-color: green;
  border-radius: 10px;
  color: #FFF;
}

table {
  border-collapse: collapse;
  z-index: 1;
  position: relative;
}

table,
th,
td {
  border: 1px solid #DDD;
  text-align: center;
}

.result div {
  background-color: #FFF;
  border: 1px solid #DDD;
  width: 50px;
  float: left;
  text-align: center;
  cursor: pointer;
}

.result div.active {
  background-color: #DDD;
}

canvas {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="result">
  <div class="active">10</div>
  <div>15</div>
  <div>20</div>
</div>
<br>
<br>
<div class="canvas-container">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Answer 1

$(function(){
var td = 5;
var rows = 10;
exist(rows);

$('table tr th:not(:first-child)').html(convert('0123456789', 'div'));

function exist(rows) {
  for (let i = 1; i <= rows; i++) {
    var arrRandom = [];

    for (let b = 0; b < 5; b++) {
      var random = Math.floor(Math.random() * 10);
      arrRandom.push(random);
    }

    $('table tbody').append('<tr></tr>');
    
    for (let d = 0; d <= td; d++) {
      if (d == 0) {
        $('table tbody tr:last-child').append('<td>' + arrRandom + '</td>');
      } else {
        $('')
        var ar = [];
        $el = $('table tbody tr:nth-child(' + (i-1) + ') td:nth-child(' + (d + 1) + ')').find("div");
        for (let c = 0; c < 10; c++) {
        	if(i==1){
                ar.push(i);
            }else{
              ar.push($($el.get(c)).hasClass("exist")?1:parseInt($($el.get(c)).text())+1)
            }
        }
        $('table tbody tr:last').append('<td>' + ar.toString().split(",").map(t => "<div>" + t + "</div>")
          .join("") + '</td>');
      }
    }

    for (let b = 0; b < arrRandom.length; b++) {
      $('table tbody tr:nth-child(' + i + ') td:nth-child(' + (b + 2) + ')').find("div:eq(" + arrRandom[b] + ")").addClass('exist').text(arrRandom[b]);
    }

  }
}

// CHANGE NUMBER OF ROWS
$('.result div').click(function() {
  $('table tbody tr').remove();
  $(this).addClass('active').siblings().removeClass('active');
  if ($(this).is(':first-child')) {
    rows = 10;
    exist(rows);
  } else if ($(this).is(':nth-child(2)')) {
    rows = 15;
    exist(rows);
  } else if ($(this).is(':nth-child(3)')) {
    rows = 20;
    exist(rows);
  }
});

function convert(num, tag) {
  return "<" + tag + ">" + (num + "").split("").join("</" + tag + "><" + tag + ">") + "</" + tag + ">"
}

var colNum = [];
for (let z2 = 0; z2 < td; z2++) {
  for (let z3 = 0; z3 < 10; z3++) {
    colNum = [];
    for (let z1 = 0; z1 < rows; z1++) {
      $('table tbody tr:nth-child(' + (z1 + 1) + ') td:nth-child(' + (z2 + 2) + ') div:nth-child(' + (z3 + 1) + ')').each(function(i) {
        if ($(this).hasClass('exist')) {
          colNum.push(z1 + 1);
        }
      });
    }
    // console.log(colNum);
  }
}
});

.canvas-container {
  display: inline-block;
  position: relative;
}

table div {
  width: 20px;
  float: left;
}

table div.exist {
  background-color: green;
  border-radius: 10px;
  color: #FFF;
}

table {
  border-collapse: collapse;
  z-index: 1;
  position: relative;
}

table,
th,
td {
  border: 1px solid #DDD;
  text-align: center;
}

.result div {
  background-color: #FFF;
  border: 1px solid #DDD;
  width: 50px;
  float: left;
  text-align: center;
  cursor: pointer;
}

.result div.active {
  background-color: #DDD;
}

canvas {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="result">
  <div class="active">10</div>
  <div>15</div>
  <div>20</div>
</div>
<br>
<br>
<div class="canvas-container">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
        <th>4</th>
        <th>5</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

你在这里..

课后重设编号

1 个答案: