Question

我有一个数组并使用JQuery在2列表中显示它。但不知何故，它并没有像预期的那样显示在2列中。

我还有2个文本字段用于输入日期和日期以过滤表格，但有些文字字段无法正常工作。

请帮忙。

HTML

<p>From:
  <input class="datepicker" id="dateFrom" type="text">To:
  <input class="datepicker" id="dateTo" type="text">
  <button class="buttApply">APPLY</button>
</p>

<div class="text"></div>
<table id="myTable" border="1" width="300" cellpadding="5">

</table>

JS

$(".datepicker").datepicker();


$('.buttApply').click(
  function() {
    var filtered = dateList.filter(function(item) {
      return item >= $('#dateFrom').val() && item <= $('#dateTo').val();
    });

    refreshTable(filtered);


  }
);

var dateList = [{
  name: "Mike Jenson",
  Date: "07/01/2014"
}, {
  name: "Liz Vinal",
  Date: "07/02/2014"
}, {
  name: "Robbin Jeson",
  Date: "07/03/2014"
}, {
  name: "Allen Greene",
  Date: "07/04/2014"
}, {
  name: "Dan Gray",
  Date: "07/05/2014"
}, {
  name: "Jann Johnson",
  Date: "07/06/2014"
}, {
  name: "Kelly Luther",
  Date: "07/07/2014"
}, {
  name: "Rock Mule",
  Date: "07/08/2014"
}, {
  name: "John Lenin",
  Date: "07/09/2014"
}, {
  name: "Micheal Jenn",
  Date: "07/10/2014"
}];

function refreshTable(list) {
  $("#myTable")..append("<tr><td>Name</td><td>Date</td></tr>");
  for (var i = 0; i < list.length; i++) {
    var tr = "<tr>";
    var td = "<td>" + list[i]["name"] + "</td>";
    var td = "<td>" + list[i]["Date"] + "</td></tr>";
    $('#myTable').append(tr + td + td);
  }
}

refreshTable(dateList);

Answer 1

以下是您第一个问题的答案

 But somehow it doesn't display into 2 columns as expected.

在for循环中尝试此操作

 var tr="<tr>";
 var td1 = "<td>" + list[i]["name"] + "</td>";
 var td2 = "<td>" + list[i]["Date"] + "</td></tr>";

 $('#myTable').append(tr+td1+td2);

您在同一个变量tds中同时拥有td，因此它覆盖了第一个变量。

对于你的第二个问题，这样做，因为你得到完整的对象，你必须与日期进行比较。

 return item.Date >= $('#dateFrom').val() && item.Date <= $('#dateTo').val();

Answer 2

你想要这样的东西：

var tr = "<tr>";
var tdName = "<td>" + list[i]["name"] + "</td>";
var tdDate = "<td>" + list[i]["Date"] + "</td></tr>";
$('#myTable').append(tr + tdName + tdDate);

看看并与原始代码进行比较。 td在第二个var td上遭到破坏。

关于日期过滤，您需要：

return item.Date >= $('#dateFrom').val() && item.Date <= $('#dateTo').val();

在您的代码中，您将日期值从用户输入与dateList中的对象进行比较。所以比较看起来像这样：

"07/04/2014" <= {name: "Mike Jenson", Date: "07/01/2014"} === ???

Answer 3

Demo试试这个，

 var td = "<td>" + list[i]["name"] + "</td>";
 var td1 = "<td>" + list[i]["Date"] + "</td></tr>";
 $('#myTable').append(tr+td+td1);

阵列过滤器和阵列显示

3 个答案: