如何从动态创建的 HTML 字符串表中获取行

How to get rows from HTML string table created dynamically?

本文关键字：字符串 获取 HTML 动态 创建      更新时间：2023-09-26

我正在使用JavaScript创建一个HTML表：

function CreateArray(){
  var arr = [];
  for(var i = 0 ; i < 10; i++){    
    arr.push({
      firstName:"John",
      lastName:"Doe",
      email:"email"+i.toString()+"@gmail.com"
    }); 
  } 
  return arr;
}
function CreateTable(data) {   
  var tableStr = [];
  var j = -1;
  tableStr[++j] = '<table class="tftable" border="1"><thead><tr><th><input type="checkbox" id="allEmails" onclick = "SelectAllEmails()"/></th><th>First Name</th><th>Family Name</th><th>Email</th></tr></thead><tbody>';
  for (var i = 0; i < data.length; i++) {
    tableStr[++j] = '<tr><td>';
    tableStr[++j] = '<input type= "checkbox"';
    tableStr[++j] = 'id =' + "chbxEmail" + i.toString() +" "+'onclick =' + "foo(this)"+" "+'/>';
    tableStr[++j] = '</td><td>';
    tableStr[++j] =  data[i].firstName;
    tableStr[++j] = '</td><td>';
    tableStr[++j] = data[i].lastName;
    tableStr[++j] = '</td><td>';
    tableStr[++j] = data[i].email;
    tableStr[++j] = '</td></tr>';
  }
  tableStr[++j] = '</tbody></table>';
  var table = tableStr.join('');
}

我需要获取 HTML 表中除标题行之外的所有行。我试过这种方式：

var trows =  table.getElementsByTagName('tbody')[0].rows;
alert(trows.length);

但我没有得到任何结果。甚至不显示警报框。

如何在没有标题行的情况下获取表变量内的行？

使用 Javascript ：

document.querySelectorAll('#table-id tr:not(:first-child)')

使用Javascript的另一种解决方案：

document.getElementById('table-id').children[1].children

使用 JQuery ：

$('#table-id tr:not(:first-child)')

问题是，您可能没有将表插入HTML DOM。 否则它应该可以工作。您也可以考虑使用 querySelector 函数代替 getElementsByTagName ，例如 var rows = document.querySelector('tbody tr');

我使用insertAdjacentHTML将字符串解析为HTML DOM

https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML

相关文章：