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>

有人能告诉我如何正确地做到这一点吗？我一直在尝试使用.adpend（）与jQuery，但我一直无法搞清楚。我确信解决方案比我想的要简单得多......感谢所有的帮助。

Answer 1

基本上我想要添加另一个行

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

$('.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>

Answer 2

＆＃13;

var tr;
$('#add').click(function(){
	tr = $('<tr/>');
	tr.append("<td class='trow1'><strong><a href='myawards.php?awid=5'>Award5</a></strong></td>");
tr.append("<td class='trow1'>Description for award here</td>");
tr.append("<td class='trow1' align='center'><img src='/uploads/awards/5.jpg' alt='Award5' /></td>");
$('#tableid').append(tr);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="0" cellspacing="1" cellpadding="4" class="tborder" id='tableid'>
<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>
    </table>
    
    <input type='button' value='Add Row' id='add'>

＆＃13;

你可以这样做。单击按钮上的事件会将附加到表上的td附加到表

上

Answer 3

这是一个小样本。

＆＃13;

var table = document.getElementById('sample');

var row = table.insertRow();

var columns = table.rows[0].cells.length || 3;

for(var i = 0; i < columns; ++i){
    var cell = row.insertCell(i);
    cell.innerHTML = "Cell #"+i;
}

＆＃13;

<table id='sample'>
    <tr><td>Cell #0</td><td>Cell #1</td><td>Cell #2</td></tr>
 </table>

＆＃13;

用jQuery

3 个答案: