Question

我有一张桌子和一个输入，一个人应该输入一个月1-12，提交时，该月的行应变为红色。如何从这些日期中得出月份，以确定它们来自哪个月份？我不确定如何继续。

 <input type="text" placeholder="Kuukausi" id="searchMonth"/>
            <button type="submit" id="searchbutton">
            <span>Etsi</span></button>
            </div>
            <table style="width: 100%" id="table">
            <tr>
                <th>Lintu</th>
                <th>Päivä</th>
            </tr>
            <tr>
                <td>Varis</td>
                <td>20.4.2018</td>
            </tr> 
            <tr>
                <td>Huuhkaja</td>
                <td>14.9.2018</td>
            </tr> 
            <tr>
                <td>Pääskynen</td>
                <td>24.4.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>30.3.2018</td>
            </tr>

Answer 1

使用type="number"输入元素
无需“提交”按钮。
向tbody添加一个ID
使用JS TableElement rows和TableRowElement cells对象
使用"input"事件来触发searchMonth()函数
环绕TBODY TR元素，找到第1个索引单元格，然后将其内容除以.点，以获取月份字符串。
检查分割的日期月份是否等于输入的日期
使用JS Element.classList.toggle('className', boolean)切换CSS .highlight类

const tbody = document.querySelector("#tableTbody");

const searchMonth = evt => {
  const monthValue = evt.target.value.trim();
  [...tbody.rows].forEach(row => {
    const month = row.cells[1].textContent.split('.')[1];
    row.classList.toggle('highlight', monthValue == month);
  })
};

document.querySelector("#searchMonth").addEventListener('input', searchMonth);

.highlight td {
  background: yellow;
}

<label>Month: <input type="number" id="searchMonth" min=1 max=12></label>

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody id="tableTbody">
    <tr>
      <td>a</td>
      <td>20.4.2018</td>
    </tr>
    <tr>
      <td>b</td>
      <td>14.9.2018</td>
    </tr>
    <tr>
      <td>c</td>
      <td>24.4.2018</td>
    </tr>
    <tr>
      <td>d</td>
      <td>30.3.2018</td>
    </tr>
  </tbody>
</table>

Answer 2

首先，您可以使用split之类的currentText.split(".")[1]来获取月份值

第二， searchMonth的输入类型应为number，以仅允许数字值。

$("#searchbutton").on("click", function(){
   var searchMonth = $("#searchMonth").val();
   
   $("table tr").each(function(){
      var currentText = $(this).find(":eq(1)").text();
      var currentMonth = currentText.split(".")[1];
      
      var background_color = searchMonth == parseInt(currentMonth) ? "#00ff78" : "";
        $(this).css("background-color", background_color);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" placeholder="Kuukausi" id="searchMonth" value = "4"/>
<button type="submit" id="searchbutton">
            <span>Etsi</span></button>
            </div>
            <table style="width: 100%" id="table">
            <tr>
                <th>Lintu</th>
                <th>Päivä</th>
            </tr>
            <tr>
                <td>Varis</td>
                <td>20.4.2018</td>
            </tr> 
            <tr>
                <td>Huuhkaja</td>
                <td>14.9.2018</td>
            </tr> 
            <tr>
                <td>Pääskynen</td>
                <td>24.4.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>30.3.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>20.02.2018</td>
            </tr>

Answer 3

类似的事情会起作用：

// handle click and add class
$('#searchbutton').on("click", function() {
  $('.highlight').removeClass('highlight');
  var rows = $('#table').find('tr');
  var value = $('#searchMonth').val().trim();
  $.each(rows, function() {
    var dateCol = $(this).find('td').eq(1);
    if (dateCol.length > 0) {
      var date = dateCol.text();
      var month = (date.match(/\d{2}.(\d{1,2}).\d{4}/) || [])[1];
      if (month == value) {
        $(this).addClass('highlight');
      }
    }
  });

})

.highlight {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Kuukausi" id="searchMonth"/>
            <button type="submit" id="searchbutton">
            <span>Etsi</span></button>
            <table style="width: 100%" id="table">
            <tr>
                <th>Lintu</th>
                <th>Päivä</th>
            </tr>
            <tr>
                <td>Varis</td>
                <td>20.4.2018</td>
            </tr> 
            <tr>
                <td>Huuhkaja</td>
                <td>14.9.2018</td>
            </tr> 
            <tr>
                <td>Pääskynen</td>
                <td>24.4.2018</td>
            </tr>
            <tr>
                <td>Peippo</td>
                <td>30.3.2018</td>
            </tr> 
            </table>

根据月份突出显示行

3 个答案: