-1
以下是我的代碼。如何添加/刪除懸停事件，並使用jQuery中的dblclick（）替換新添加的錶行？
我想添加一個懸停事件和交替行到第二個表中新添加的錶行。
我在第一個表的每個錶行上偵聽一個雙擊事件，它將錶行添加到第二個表中。我想要一個懸停事件，我想通過更改背景顏色來替換第二個表的行。
我已經交替了第一個表格行，但是如果我將第二個表格行懸停，沒有懸停事件並且沒有交替的表格行。 我也想刪除已經雙擊的行上的第一個表中的懸停。
我也想計算它們的總值。
但我該怎麼辦？對不起，我是一個初學者使用jQuery。
這是我的代碼。
<html>
<head>
<title>Machine Project 1</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>
</head>
<body>
<h1 style="background:blue" id="list1">List of Course Offerings</h1> <br/>
<table class="tab1" id="t1" border="1" width="1000" height="100">
<thead style="background:silver">
<tr>
<th>Course ID </th>
<th>Course Description</th>
<th>Day</th>
<th>Time</th>
<th>Tuition Fee</th>
</tr>
</thead>
<tbody class="t1">
<tr class="row1">
<td>001</td>
<td>Android Programming</td>
<td>Sat</td>
<td>10:00AM - 4:00PM</td>
<td>15,000.00</td>
</tr>
<tr class="row2">
<td>002</td>
<td>Web Development</td>
<td>MWF</td>
<td>5:00PM - 8:00 PM</td>
<td>10,000.00</td>
</tr>
<tr class="row3">
<td>003</td>
<td>Desktop Publishing</td>
<td>TTH</td>
<td>5:00PM - 8:00PM</td>
<td>8,000.00</td>
</tr>
<tr class="row4">
<td>004</td>
<td>C++ Programming</td>
<td>Sat</td>
<td>5:00PM - 8:00PM</td>
<td>12,000.00</td>
</tr>
<tr class="row5">
<td>005</td>
<td>Java Programming</td>
<td>MWF</td>
<td>7:00AM - 1:00PM</td>
<td>11,000.00</td>
</tr>
</tbody>
</table>
<br/>
<h1 style="background:blue" id="list2">List of Selected Courses</h1> <br/>
<table class="tab2" id="t2" border="1" width="1000" >
<thead style="background:gold">
<tr>
<th>Course ID </th>
<th>Course Description</th>
<th>Day</th>
<th>Time</th>
<th>Tuition Fee</th>
</tr>
</thead>
<tbody >
</tbody>
</table>
<br/>
<table class="tab3" id="t3" border="1" width="1000" >
<tbody>
<tr>
<th>Total Amount of Tuition Fee</th>
<th> </th>
<th> </th>
<th> </th>
<th>Php 0.00 </th>
</tr>
</tbody>
</table>
的Javascript
<script type="text/javascript">
$(document).ready(function(){
$("#list1").click(function(){
$(".tab1").slideToggle("slow");
});
$("#list2").click(function(){
$(".tab2").slideToggle("slow");
});
$(".tab2 tr:odd").addClass("Odd");
$("#t1 tr:odd").addClass("Odd");
$(".tab1 tbody").hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
$('#t2').hover(function(){
$(this).addClass('hover');
}, function(){
$(this).removeClass('hover');
});
$(".row1").on('dblclick',function(){
var cols ="";
var newRow1=$("<tr class='tlbl'>");
cols += "<td>001</td><td>Android Programming</td><td>Sat</td><td>10:00AM - 4:00PM</td><td>15,000.00</td>";
newRow1.append(cols);
$("table.tab2").append(newRow1);
$(this).removeClass('hover');
});
$(".row2").on('dblclick',function(){
var cols ="";
var newRow1=$("<tr class='tlbl'>");
cols += "<td>002</td><td>Web Development</td><td>MWF</td><td>5:00PM - 8:00 PM</td><td>10,000.00</td>";
newRow1.append(cols);
$("table.tab2").append(newRow1);
$(this).removeClass('hover');
});
$(".row3").on('dblclick',function(){
var cols ="";
var newRow1=$("<tr class='tlbl'>");
cols += "<td>003</td><td>Desktop Publishing</td><td>TTH</td><td>5:00PM - 8:00PM</td><td>8,000.00</td>";
newRow1.append(cols);
$("table.tab2").append(newRow1);
$(this).removeClass('hover');
});
$(".row4").on('dblclick',function(){
var cols ="";
var newRow1=$("<tr class='tlbl'>");
cols += "<td>004</td><td>C++ Programming</td><td>Sat</td><td>5:00PM - 8:00PM</td><td>12,000.00</td>";
newRow1.append(cols);
$("table.tab2").append(newRow1);
$(this).removeClass('hover');
});
$(".row5").on('dblclick',function(){
var cols ="";
var newRow1=$("<tr class='tlbl'>");
cols += "<td>005</td><td>Java Programming</td><td>MWF</td><td>7:00AM - 1:00PM</td><td>11,000.00</td>";
newRow1.append(cols);
$("table.tab2").append(newRow1);
$(this).removeClass('hover');
});
$("table.tab2").on('dblclick','.tlbl',function(event){
$(this).closest("tr").remove();
});
});
</script>
</body>
</html>
能否請你澄清你想要達到的目標。現在這一切都很不清楚。 –
我想添加懸停事件，如果我添加新的表格行，它會自動交替他們的背景顏色。我創建了2個表格。在第一個表格中，將表格行添加到另一個表格的doubleclick事件以及刪除第一個表格，懸停事件和交替表格行背景顏色中的項目中的懸停事件。但如果我點擊第一個表格行，懸停事件不會發生在第二個表格中，也不會在第二個表格中交替顯示背景顏色。 –