2
我用表格写了一个HTML文件。该表默认有大约7个条目（包含数据的行）。当用户点击其中一行时，背景颜色会发生变化，并且会变成标记，我使用jQuery切换功能来完成它。 我也有一个按钮，在此表中添加更多的行，也用jQuery。我的问题：当我（用户）用该按钮添加一些行并单击这些新添加的行时，背景颜色不会改变，但默认行的背景颜色会改变。用jquery添加html表格行不能设置为标记
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".row").click(function(){
$(this).toggleClass("activeRow");
});
$(document).on('click', '#addButton', function(){
$(".myTable tbody").append(" <tr class="row"> <td>New</td> <td>This</td> <td>is</td> <td>great</td> </tr>");
});
});
</script>
<style>
.activeRow{
background-color:#B0BED9;
}
.myTable {
border-collapse: collapse;
width: 80%;
clear:both;
margin-top: 0;
border-spacing: 0;
table-layout: fixed;
border-bottom: 1px solid #000000;
}
.myTable tbody, .myTable thead{
display: block;
width: 100%;
}
.myTable tbody{
overflow: auto;
height: 300px;
}
.myTable th, td{
width: 450px;
}
</style
<table class="myTable">
<thead>
<tr id="headRow">
<th>alo</th>
<th>salam</th>
<th>kissa</th>
<th>chissa</th>
</tr>
</thead>
<tbody class="bodyRows">
<tr class="row" >
<td>Microsoft</td>
<td>Saber</td>
<td>30.5</td>
<td>23.5</td>
</tr>
<tr class="row">
<td>Huawei</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
</tr>
<tr class="row">
<td>Huawei</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
</tr>
<tr class="row">
<td>Huawei</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
</tr>
<tr class="row">
<td>Huawei</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
</tr>
<tr class="row">
<td>Huawei</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
</tr>
<tr class="row">
<td>Huawei</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
</tr>
<tr class="row">
<td>Google</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
</tr>
<tr class="row">
<td>Apple</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
</tr>
<tr class="row">
<td>IBM</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
</tr>
</tbody>
</table>
<button id="addButton" class="tableButton">Add Row</button>
嗨，谢谢，什么是你在函数括号中写的“ev”？ – Lanatbaryazid
在这种情况下，您并未使用它。它是事件对象，涉及每个定义为事件回调的函数。你可以给它任何名称，然后用它作为参考来检查事件属性（类型，目标，currentTarget ...） –
好的工作，非常感谢你 – Lanatbaryazid