在JavaScript中创建动态表有些误解

Question

我尝试使用JavaScript创建动态表，该表包含两个列的名字和姓氏。

这是JavaScropt代码：

function CreatTable() {

    var tablearea = document.getElementById('ShowDataID');
    var table = document.createElement('table');
    var thead = document.createElement("thead");
    var tr = document.createElement('tr');
    var th = document.createElement('th');

    var firstNameTxt = document.createTextNode("First Name");
    th.appendChild(firstNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    var familyNameTxt = document.createTextNode("Family Name");
    th.appendChild(familyNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    for (var i = 1; i < 4; i++) {
        var tr = document.createElement('tr');
        tr.appendChild(document.createElement('td'));
        tr.appendChild(document.createElement('td'));
        tr.cells[0].appendChild(document.createTextNode('John'))
        tr.cells[1].appendChild(document.createTextNode('McDowell'))
        table.appendChild(tr);
    }


    tablearea.appendChild(table);
}

这是我得到的结果：

我的问题是为什么我会得到＆＃34; McDowell＆＃34;不在姓氏栏下。为什么要转移？我缺少什么？

Answer 1

尝试第二次创建新的th，不要使用已经使用的<{p>}

function CreatTable() {

    var tablearea = document.getElementById('ShowDataID');
    var table = document.createElement('table');
    var thead = document.createElement("thead");
    var tr = document.createElement('tr');
    var th = document.createElement('th');

    var firstNameTxt = document.createTextNode("First Name");
    th.appendChild(firstNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    //********* Look here *****************
    var familyNameTxt = document.createTextNode("Family Name");
    th = document.createElement('th'); //*** Create a new th here. Dont use the old one
    //********* Look here *****************

    th.appendChild(familyNameTxt);
    tr.appendChild(th);
    thead.appendChild(tr);
    table.appendChild(thead);

    for (var i = 1; i < 4; i++) {
        var tr = document.createElement('tr');
        tr.appendChild(document.createElement('td'));
        tr.appendChild(document.createElement('td'));
        tr.cells[0].appendChild(document.createTextNode('John'))
        tr.cells[1].appendChild(document.createTextNode('McDowell'))
        table.appendChild(tr);
    }


    tablearea.appendChild(table);
}

DEMO

Answer 2

<强> SOLUTION

function CreatTable() {

  var tablearea = document.getElementById('ShowDataID');
  var table = document.createElement('table');
  var thead = document.createElement('thead');
  var tr = document.createElement('tr');
  var th = document.createElement('th');

  var firstNameTxt = document.createTextNode("First Name");
  th.appendChild(firstNameTxt);
  tr.appendChild(th);
thead.appendChild(tr);
  table.appendChild(thead);

  var familyNameTxt = document.createTextNode("Family Name");
  th = document.createElement('th');
  th.appendChild(familyNameTxt);
  tr.appendChild(th);
  thead.appendChild(tr);
  table.appendChild(thead);

  for (var i = 1; i < 4; i++) {
    tr = document.createElement('tr');
    tr.appendChild(document.createElement('td'));
    tr.appendChild(document.createElement('td'));
    tr.cells[0].appendChild(document.createTextNode('John'));
    tr.cells[1].appendChild(document.createTextNode('McDowell'));
    table.appendChild(tr);
  }


  tablearea.appendChild(table);
}
CreatTable();

Answer 3

你错过了创造新的

var familyNameTxt = document.createTextNode("Family Name");
th = document.createElement('th'); // this line missed
th.appendChild(familyNameTxt);

Answer 4

创建动态表行并删除单击删除按钮行。为此你可以使用jQuery两种方法 .append（）此方法用于附加html表格行，在按钮上单击.add_row_record，从文本框中获取值并在表格行上附加数据。

.remove（）此方法用于删除动态内容数据，在本例中我们用于删除追加记录。 .delete_row_record按钮根据所选复选框删除记录。

<script type="text/javascript">
$(document).ready(function(){
   //add row
    $(".add_row_record").click(function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var mobile = $("#mobile_number").val();
        var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td><td>" + mobile + "</td></tr>";
        $("table tbody").append(markup);
    });

    // select record for delete
    $(".delete_row_record").click(function(){
        $("table tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });
});    

Demo