Question

我被告知从不在JavaScript中使用HTML标记是一种好习惯。所以我尽我所能来执行以下操作，但我没有得到我想要的东西。

我有两张桌子：

表＃1：我用来追加行的表。

表＃2：一个只有1行的隐藏表，我使用该行来更改其内容并将其附加到表＃1

表＃1

<table id="myTable">
    <thead>
        <tr>
            <th>Full Name</th>
            <th>ID</th>
            <th>Email</th>
            <th>Phone Number</th>
            <th>Job Title</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

表＃2

<table id='hiddenTable'>
    <tbody>
        <tr>
            <td><span id="fname"></span></td>
            <td><span id="id"></span></td>
            <td><span id="email"></span></td>
            <td><span id="pnumber"></span></td>
            <td><span id="job"></span></td>
        </tr>
    </tbody>
</table>

附加功能

function addRow(data){
    $('#fname').text(data.fname);
    $('#id').text(data.id);
    $('#email').text(data.email);
    $('#pnumber').text(data.pnumber);
    $('#job').text(data.job);
    var row = $('#hiddenTable').children('tbody').children('tr:first').clone();
    $('#myTable > tbody:last-child').append(row);
}

每次执行addRow（）时都会更新所有快照，但是当从隐藏表中检索行元素时，它仍为空，不变。

请解释为什么会发生这种情况？并帮助我在javascript中使用html标签而不使用插入行功能来完成这项工作。

Answer 1

正如@CBroe所建议的那样;主要问题是重复ID被分配给DOM元素。要克服第一次更改隐藏表格的HTML，使class代替id。请看下面的代码：

function addRow(data) {

  //first clone the row from hidden table
  var row = $('#hiddenTable').children('tbody').children('tr:first').clone();
  
  //find the span having unique class assigned to them and then set the value
  row.find('.fname').text(data.fname);
  row.find('.id').text(data.id);
  row.find('.email').text(data.email);
  row.find('.pnumber').text(data.pnumber);
  row.find('.job').text(data.job);
  
  //append the newly formed row to main table
  $('#myTable  tbody').append(row);
}

$(function() {
  var data1 = {
    fname: "some name",
    id: "some id",
    email: "some@email.com",
    pnumber: "1212121212",
    job: "some job"
  };

  addRow(data1);
  
  var data2 = {
    fname: "some name 22",
    id: "some id 22",
    email: "some22@email.com",
    pnumber: "88888888888888",
    job: "some job 22"
  };

  addRow(data2);
  
});

#hiddenTable {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Full Name</th>
      <th>ID</th>
      <th>Email</th>
      <th>Phone Number</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<table id='hiddenTable'>
  <tbody>
    <tr>
      <td><span class="fname">aaaaaa</span>
      </td>
      <td><span class="id"></span>
      </td>
      <td><span class="email"></span>
      </td>
      <td><span class="pnumber"></span>
      </td>
      <td><span class="job"></span>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

您所做的一切都是正确的，除非data对象不正确，否则应该按预期工作。制作data对象的控制台，并尝试弄清楚如何从中提取属性。

＆＃13;

function addRow(data) {
  $('#fname').text(data.fname);
  $('#id').text(data.id);
  $('#email').text(data.email);
  $('#pnumber').text(data.pnumber);
  $('#job').text(data.job);
  var row = $('#hiddenTable tr').first().clone();
  $('#myTable tbody').append(row);
}

var data = {
  fname: 'first name',
  id: '12121',
  email: 'email@gmail.com',
  pnumber: '111111111',
  job: 'my job'
}

addRow(data);

＆＃13;

#hiddenTable {

  display: none;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Full Name</th>
      <th>ID</th>
      <th>Email</th>
      <th>Phone Number</th>
      <th>Job Title</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>


<table id='hiddenTable'>
  <tbody>
    <tr>
      <td><span id="fname"></span>
      </td>
      <td><span id="id"></span>
      </td>
      <td><span id="email"></span>
      </td>
      <td><span id="pnumber"></span>
      </td>
      <td><span id="job"></span>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 3

试试这个JSFiddle解决方案。

我在addRow函数上更改了一些内容：

function addRow(data){
        $('#hiddenTable #fname').text(data.fname);
        $('#hiddenTable #id').text(data.id);
        $('#hiddenTable #email').text(data.email);
        $('#hiddenTable #pnumber').text(data.pnumber);
        $('#hiddenTable #job').text(data.job);
        var row = $('#hiddenTable tbody').html();
        $('#myTable > tbody').append(row);
    }

在更新行中的元素后，将正文标记中的表行附加到另一个表

3 个答案: