javascript - 使用 jQuery 附加 td

Question

所以我正在尝试修改这个...(这只是代码的一部分，它太大了)

<div class="quick_keys">
<!-- end: header -->
<form method="post" action="myawards.php">
<table border="0" cellspacing="1" cellpadding="4" class="tborder">
<tr>
<td class="thead" colspan="3"><strong>My Awards</strong></td>
</tr>
<tr>
<td class="tcat" width="18%"><strong>Name</strong></td>
<td class="tcat"><strong>Description</strong></td>
<td class="tcat" width="10%" align="center"><strong>Award</strong></td>
</tr><tr>
    <td class="trow1"><strong><a href="myawards.php?awid=1">Diamond</a></strong></td>
    <td class="trow1">A valued member of our community.</td>
    <td class="trow1" align="center"><img src="/uploads/awards/3.jpg" alt="Diamond" /></td>
    </tr><tr>
    <td class="trow2"><strong><a href="myawards.php?awid=2">White Hat Helper</a></strong></td>
    <td class="trow2">One that has done well helping others.</td>
    <td class="trow2" align="center"><img src="/uploads/awards/1.jpg" alt="White Hat Helper" /></td>
    </tr><tr>
    <td class="trow1"><strong><a href="myawards.php?awid=3">Speaker of the House</a></strong></td>
    <td class="trow1">This award goes to members that have a lot to say.</td>
    <td class="trow1" align="center"><img src="/uploads/awards/4.jpg" alt="Speaker of the House" /></td>
    </tr><tr>
    <td class="trow2"><strong><a href="myawards.php?awid=4">Member of the Month</a></strong></td>
    <td class="trow2">This is a monthly award for the best member.</td>
    <td class="trow2" align="center"><img src="/uploads/awards/7.jpg" alt="Member of the Month" /></td>
    </tr><tr>

基本上我正在尝试添加另一行，例如

<td class="trow1"><strong><a href="myawards.php?awid=5">Award5</a></strong></td>
<td class="trow1">Description for award here</td>
<td class="trow1" align="center"><img src="/uploads/awards/5.jpg" alt="Award5" /></td>

谁能告诉我如何正确地做到这一点？我一直在尝试将 .append() 与 jQuery 一起使用，但我一直无法弄清楚它。我确信解决方案比我想象的要简单得多...感谢所有帮助。

Answer 1

Basically what i' m trying to add another row

请注意我在上面添加的重点:您正在尝试添加一个行，因此您需要一个tr，而不仅仅是一堆tds:

$('.tborder').append(
    '<tr>' +   // <== Note
    '<td class="trow1"><strong><a href="myawards.php?awid=5">Award5</a></strong></td>' +
    '<td class="trow1">Description for award here</td>' +
    '<td class="trow1" align="center"><img src="/uploads/awards/5.jpg" alt="Award5" /></td>' +
    '</tr>'    // <== Note
);

实例:

$('.tborder').append(
  '<tr>' + // <== Note
  '<td class="trow1"><strong><a href="myawards.php?awid=5">Award5</a></strong></td>' +
  '<td class="trow1">Description for award here</td>' +
  '<td class="trow1" align="center"><img src="/uploads/awards/5.jpg" alt="Award5" /></td>' +
  '</tr>' // <== Note
);

<table border="0" cellspacing="1" cellpadding="4" class="tborder">
  <tr>
    <td class="thead" colspan="3"><strong>My Awards</strong>
    </td>
  </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>