jquery - 在html和jquery中获取表的列值的总数

Question

我有一个表，值来自 json，我需要“forkscount”列中的关键总数，这里总共有 11 个“关键”，但如何获得该值，我已经尝试过控制台和警报，但我没有成功，如果有人知道请需要帮助，在此先感谢。下面是我执行的代码 html、javascript、css、json，这只能在本地主机中打开。如果你直接想通过单击 index.html 打开它不会打开。

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
 <script type="text/javascript" charset="utf8" src="js/script.js"></script>
<div class="col-md-12">
<div class="col-md-4 critical-box" id="critical">critical</div><div id="major" class="col-md-4 major-box">major</div><div id="test" class="col-md-4 All-box">All</div>
</div>
<div id="div">
<div>
 <table id="example">
        <thead>
            <tr>
            <th style="display:none;">test</th>
                <th>name</th>
                <th>stargazerscount</th>
                <th>forkscount</th>
                <th>description</th>

            </tr>
        </thead>



        <tbody>

        </tbody>
    </table>
    </div>
    <div>ssss</div>
</div>

脚本.js

    $.ajax({
        url: "http://localhost/bootstrap-tablefilter/js/members.json", 
        type: "POST",    
        dataType:"json",   
        success: function (response) 
        {
         // var trHTML = '';
          $.each(response, function (key,value) {
             $('table#example TBODY').append('<tr><td style="display:none;">test</td><td>'+value.name+'</td><td>'+value.stargazerscount +'</td><td ><span class="'+ value.forkscount +'">'+value.forkscount +'</span></td><td>'+value.description +'</td></tr>');    
         // var x;
         if(value.forkscount == 'critical'){
             var y=value.forkscount.length;
            console.log(y);
            //  var n = $(y).;

         }

          });

           // $('#table').append(trHTML);
        } 

    });

$(document).ready( function () {

$('#example tbody tr td span.critical').closest('tr').addClass('critialrow');   
$('#example tbody tr td span.major').closest('tr').addClass('majorrow');
 // $('#example').DataTable();
   var tables = $('#example').DataTable({

   dom : '2<"#add">frtip',
    "language": {
    "paginate": {
      "previous": "<&nbsp;Previous",
      "next": "next&nbsp;>"
    }
  }

})
$('<label/>').text('Search Column:').appendTo('#add')
$select = $('<select/>').appendTo('#add')

$('<option/>').val('All').text('All').appendTo($select);
$('<option/>').val('0').text('name').appendTo($select);
$('<option/>').val('1').text('stargazerscount').appendTo($select);
$('<option/>').val('2').text('forkscount').appendTo($select);
$('<option/>').val('3').text('description').appendTo($select);
$('input[type="search"]').on( 'keyup change', function () {
  var searchValue = $(this).val();
  var columnSearch = $select.val();

  if(columnSearch == 'All'){
    tables.search(searchValue).draw();
  } else {
    tables.columns(columnSearch).search(searchValue).draw();
  }
 });  

$("div").delegate(".major-box", "click", function(){

    var majorValue = $(this).attr('id');

    if(majorValue== 'major'){
    tables.search(majorValue).draw();
    $("#example_filter input").addClass('white');

  }

});

$(".critical-box").bind("click", function(){

    var criticalssValue = $(this).attr('id');

    if(criticalssValue== 'critical'){
    tables.search(criticalssValue).draw();
  }

});
$("div").delegate(".All-box", "click", function(){

    var criticalssValue = $(this).attr('id');
    alert(criticalssValue);
    if(criticalssValue== 'test'){
    tables.search(criticalssValue).draw();
  }

});
}); 

成员.json

[{
            "name": "mango",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "fruits"
        },
        {
            "name": "brinjal",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "vagetables"
        },
        {
            "name": "grapes",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "fruits"
        },
        {
            "name": "soap",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "groceries"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        }


    ]

Answer 1

创建一个全局变量“count”并在 forkscount 为“critical”时增加“each”循环。

var count = 0;
...
$.ajax({
    url: "http://localhost/bootstrap-tablefilter/js/members.json", 
    type: "POST",    
    dataType:"json",   
    success: function (response) 
    {         
        $.each(response, function (key,value) {
            ...
            if(value.forkscount == 'critical')
                count++;
            ...
        });
    }
    ...
});

您还可以使用 promises 在“每个”结论之后获取值(value)

$.each(response, function (key,value) {
    ...
    if(value.forkscount == 'critical')
        count++;
    ...
}).promise().done(function(){ 
    alert("Total 'criticals': " + count); 
});