附加在外面

Question

我正在处理一个表，该表显示循环中的数据，并且整行都被追加。该代码运行良好，当我检查元素时，我发现<td>在<tr>之外，我该如何解决它。

希望你能帮助我。

谢谢。

var dataNum = 10;

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>

Answer 1

您的

$('table tbody').append('<td>'...

正在将td附加到tbody。

首先尝试创建tr，将其附加到tbody，然后将td s附加到tr：

var dataNum = 10;

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

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

}



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>

Answer 2

在您的代码中，您要将tr和td都附加到tbody上。您需要将td附加到tr

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

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

Answer 3

那是因为下一行。

$('table tbody').append('<tr>');实际上将tr附加到DOM中。因此，基本上<tr></tr>会自动完成，因为浏览器很聪明，并试图确保有效的HTML DOM结构。理想情况下，您应该创建一个存储所需的整个DOM结构的字符串，并在其末尾附加它，因为DOM操作很慢。

var dataNum = 10;
var str='';
for (let t = 1; t <= dataNum; t++) {

str += '<tr>';

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


}
  $('table tbody').append(str);



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>