Question

以下是我的代码。

我想在第二个表中添加一个悬停事件和交替行到新添加的表行。

我在第一个表的每个表行上听一个双击事件，它将表行添加到第二个表。我希望有一个悬停事件，我希望通过更改背景颜色来替换第二个表格的行。

我已经替换了第一个表行但是如果我悬停第二个表行，则没有悬停事件，也没有交替的表行。我还想在第一个表中删除已双击的行上的悬停。

我也想计算他们的总价值。

但我该怎么办？抱歉，我是初学者，使用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>

Answer 1

我更新了您的javascript代码和css。

每个行都有一个dblclick事件处理程序，这会使代码膨胀而不需要。您只需向第一个表的tbody内的所有行添加一个侦听器，双击行clone，并将append添加到第二个表。

对于交替行和悬停，您可以使用纯CSS执行此操作。禁用悬停是通过CSS和JavaScript / jQuery的组合完成的。

为了更新学费总额，我为所有.tuition-fee元素添加了td课程，其中包含该课程的学费，以及span课程.total-fee到指出应显示总费用的位置。从那以后，很容易获得增加的行的学费，当前的总数并将这两者加在一起。然后使用Number.prototype.toLocaleString()，您可以随意渲染结果。

评论在代码中。

小提琴： https://jsfiddle.net/ksnqg7fw/3/

<强> CSS

/**
 * Set alternating rows in both tables
 */
.tab1 tbody tr:nth-child(even),
.tab2 tbody tr:nth-child(even) {
  background-color: lightgrey;
}

/**
 * Add hover to all rows that don't have the 'disabled' class
 */
.tab1 tbody tr:not(.disabled):hover,
.tab2 tbody tr:not(.disabled):hover {
  background-color: salmon;
}

/**
 * Show the disabled state on disabled rows
 */
.disabled {
  color: grey;
}

<强>的JavaScript / jQuery的

$(document).ready(function() {
  $("#list1").click(function() {
    $(".tab1").slideToggle("slow");
  });
  $("#list2").click(function() {
    $(".tab2").slideToggle("slow");
  });

  // One listener for all rows inside the first table
  $('.tab1').find('tbody').find('tr').on('dblclick', function() {
    // Create a clone of the double-clicked row
    var $newRow = $(this).clone();
    // Add a 'disabled' CSS class to the double-clicked row
    $(this).addClass('disabled');
    // Remove the listener for the double-clicked row, so it can't be added to the selected courses again
    $(this).off('dblclick');
    // Add the copy to the second table
    $('.tab2').find('tbody').append($newRow); 
    // Get the current tuition fee
    // (remove the thousand separators, replace '.' by ',' and parse to number)
    var oldFee = parseFloat($('.total-fee').text().replace(',',''), 10);
    // Get the tuition fee to add
    var feeToAdd = parseFloat($(this).find('.tuition-fee').text().replace(',',''), 10);
    // Use toLocaleString to add the ',' and '.' again, and to add 2 fraction digits add the end
    var newFee = (oldFee + feeToAdd).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});
    // Set the new fee
    $('.total-fee').text(newFee);
  });
});

如何在jquery中使用dblclick（）添加/删除悬停事件并替换新添加的表行？

1 个答案: