如何以正确的方式使用.append和.remove

时间:2015-11-03 03:33:22

标签: jquery html datatables

我想知道为什么我的代码无法正常工作。

这是我的代码

oTable.$('tr').click(function () {

    $(this).toggleClass('selected');

    var sData = oTable.fnGetData(this);
    //alert( sData[6] );

    if ($(this).hasClass("selected")) {
        $(this).toggleClass('');

        $('#try').append("<p class='" + sData[6] + "'>" + sData[6] + "</p>");
        $('#price').append("<p class='" + sData[5] + " total'>" + sData[5] + "</p>");
        $('#item').append("<p class='" + sData[4] + "'>" + sData[4] + "</p>");
        $('#model').append("<p class='" + sData[3] + "'>" + sData[3] + "</p>");
        $('#brand').append("<p class='" + sData[2] + "'>" + sData[2] + "</p>");
        $('#pid').append("<p class='" + sData[1] + "'>" + sData[1] + "</p>");
    } else {
        $("p", "#try").remove("." + sData[6]);
        $("p", "#price").remove("." + sData[5]);
        $("p", "#item").remove("." + sData[4]);
        $("p", "#model").remove("." + sData[3]);
        $("p", "#brand").remove("." + sData[2]);
        $("p", "#pid").remove("." + sData[1]);
        // alert ("sad"); 
    }

仍然没有删除品牌和pid。需要你的帮助。

这是我的jquery所做的html代码。这些是在单击tr时获得值的div。在数据表中

<div id="try" class="try"></div>
                          <div id="price" class="price"></div>
                          <div id="item" class="item"></div>
                          <div id="model" class="model"></div>
                          <div id="brand" class="brand"></div>
                          <div id="pid" class="pid"></div>





                             <table id="example"  cellspacing="0" width="100%" class="display">
                                <thead>
                                  <tr>
                                    <th></th>
                                    <th>Category</th>
                                    <th>Brand</th>
                                    <th>Model</th>
                                    <th>Item Name</th>
                                    <th>Price</th>
                                    <th>id</th>
                                  </tr>
                               </thead>

                                <tbody>
                                <?php do { ?>
                                  <tr>
                                    <td><?php echo ++$i;?></td>
                                    <td><?php echo $row_products['pid']; ?></td>
                                    <td><?php echo $row_products['brand']; ?></td>
                                    <td><?php echo $row_products['model']; ?></td>
                                    <td><?php echo $row_products['item_name_']; ?></td>
                                    <td><?php echo $row_products['price'];?></td>
                                    <td><?php echo $row_products['id']; ?></td>
                                  </tr>
                                  <?php } while ($row_products = mysql_fetch_assoc($products)); ?>
                                </tbody>
                             </table>

1 个答案:

答案 0 :(得分:0)

HTML:

<div class="container">
<div id="try"></div>
                          <div id="price"></div>
                          <div id="item"></div>
                          <div id="model"></div>
                          <div id="brand"></div>
                          <div id="pid"></div>


</div>

                         <table id="example"  cellspacing="0" width="100%" class="display">
                            <thead>
                              <tr>
                                <th></th>
                                <th>Category</th>
                                <th>Brand</th>
                                <th>Model</th>
                                <th>Item Name</th>
                                <th>Price</th>
                                <th>id</th>
                              </tr>
                           </thead>

                            <tbody>
                            <?php do { ?>
                              <tr>
                                <td class="try"><?php echo ++$i;?></td>
                                <td class="pid"><?php echo $row_products['pid']; ?></td>
                                <td class="brand"><?php echo $row_products['brand']; ?></td>
                                <td class="model"><?php echo $row_products['model']; ?></td>
                                <td class="item"><?php echo $row_products['item_name_']; ?></td>
                                <td class="price"><?php echo $row_products['price'];?></td>
                                <td><?php echo $row_products['id']; ?></td>
                              </tr>
                              <?php } while ($row_products = mysql_fetch_assoc($products)); ?>
                            </tbody>
                         </table>

JS:

$('tbody tr').on('click', function () {



    if (!$(this).hasClass("selected")) {
            $(this).addClass('selected');
        $('#try').append("<p class='try_" + $(this).find('.try').text()+"'>" + $(this).find('.try').text() + "</p>");
        $('#price').append("<p class='try_" + $(this).find('.try').text() + " total'>" + $(this).find('.price').text() + "</p>");
        $('#item').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.item').text() + "</p>");
        $('#model').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.model').text() + "</p>");
        $('#brand').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.brand').text() + "</p>");
        $('#pid').append("<p class='try_" + $(this).find('.try').text() + "'>" + $(this).find('.pid').text() + "</p>");
    } else {
        $(this).removeClass('selected');
        $(".container").find('p').remove(".try_" + $(this).find('.try').text());
    }


});

的jsfiddle:https://jsfiddle.net/rbrx0obz/