时间戳

首页 > 解决方案 > 如何隐藏代码具有“。”的数据表行 例如 1.1、1.2 通过 jquery？

javascript - 如何隐藏代码具有“。”的数据表行 例如 1.1、1.2 通过 jquery？

问题描述

我通过ajax将两个输入的数据带到另一个页面。我在查询中使用了这两个值，并在数据表中显示了选择查询的结果，该数据表返回成功函数并显示在主页上的表中。

之后，我想使用"." (accounting->subaccounts)隐藏数据的条件，除非他单击按钮。

我只需要一个想法来隐藏它，我可以做得更多。让我告诉你我的代码。

这是按钮：

<input type="button" id="generate" onclick="getData();" value="Generate"  
class="btn btn-block btn-primary btn-sm" />

我显示表格的 div：

<div class="col-lg-12 col-sm-12 col-xs-12 col-md-12" id="tab"></div>

ajax函数：

function getData() {
            var date = $("#date").val();
            var classId = $("#class").val();
            $.ajax({
                url: "ajax/getTrailBalanceData.php",
                type: "POST",
                data: {
                    "date": date,
                    "classId": classId,
                },
                cache: false,
                async: false,
                success: function (data) {
        //alert(data);                  
                    $("#tab").html(data);

                    var row_main_code = $("#main_code").val();


                    if (row_main_code.indexOf(".") > -1) {
    //                  $("#tbl_row").addClass("hide");
                    } else {
  //                      $("#tbl_row").removeClass("hide");
 //                    $("#main_code").parents("tr").hide();
 //                    $("#tbl_row").addClass("hide");
      //                 $("#main_code").val("hide");
                    }
                }
            });
        }

我尝试了“成功”的if(rowmaincode.indexof('.')>-1)条件但没有给出理想的结果我很困惑我不知道为什么但让我向您展示其他页面代码：

<table id="trail_balance_list" class="table table-bordered table-condensed bootstrap-datatable datatable responsive">
<thead id="table_head">
    <tr class="bg-success">

        <th class=" text-center">Code</th>
        <th class=" text-center">Account Title</th>
        <th class=" text-center" >Debit</th>
        <th class=" text-center" >Credit</th>
        <th class=" text-center" >Action</th>

    </tr>
</thead>
<tbody>
    <?php
    while ($row = mysqli_fetch_assoc($result)) {
        ?>
    <tr  id="tbl_row" class="">
            <td><?php echo $row['main_code']; ?><input type="hidden" id="main_code" value="<?php echo $row['main_code']; ?>" /></td>
            <td><?php echo $row['account_title']; ?></td>
            <td></td>
            <td></td>
            <td class="text-center"><button class="btn btn-info"><i class="fa fa-arrow-down"></i></button></td>
        </tr>
        <?php
    }
    ?>
</tbody>
<tfoot>
    <tr>
        <th><input type="hidden" id="total_credit_input" name="total_credit" value="0" /></th>
        <th><input type="hidden" id="total_debit_input" name="total_debit" value="0" /></th>
        <td class="bg-warning text-center" id="total_debit">0.00</td>
        <td class="bg-warning text-center" id="total_credit" >0.00</td>

    </tr>
</tfoot>
</table>
<script>
   $(document).ready(function () {
        $("#trail_balance_list").dataTable();
   });
</script>

我得到的结果是：（见图），我只想显示 1,2,3,4

我只想显示 1,2,3,4

标签： javascriptphpjquerymysqlweb

解决方案

您在代码中实现了类似的想法，希望您能做到。我在下面添加了一个示例。

$('body').on('click', '#act_button', function() {
  $('#trail_balance_list > tbody  > tr').each(function() {
    if ($(this).find('td:first').text().indexOf('.') >= 0) {
      $(this).hide();
    } else {
      $(this).show();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="act_button">hide decimal rows</button>
<table id="trail_balance_list" border="1">
  <tbody>
    <tr>
      <td>1</td>
      <td>222</td>
    </tr>
    <tr>
      <td>33.3</td>
      <td>444</td>
    </tr>
    <tr>
      <td>555</td>
      <td>666</td>
    </tr>
    <tr>
      <td>77</td>
      <td>666</td>
    </tr>
  </tbody>
</table>

推荐阅读