bugfix> javascript > 投稿

テキストボックスの数値を配列にプッシュする必要がある要件に取り組んでいます。テキストボックスはテーブル行の2番目のセルにあり、3番目のセルは日付ピッカーです。

以下のコードスニペットは、配列内の日付値とともにすべてのテキストフィールド値を提供します。その配列にはテキストフィールドの値のみが必要です。解決策を教えてください。

var NumbersArray = $('#myTable input[type=text]').map(function() {
  return this.value;
}).get();
console.log(NumbersArray);

以下のコードも機能していません。

var secondCellContents = [],
$('#myTable tbody tr').each(function() {
  var $secondCell = $(this).children('td').eq(1).text(),
    secondCellContent = $secondCell.text();
  secondCellContents.push(secondCellContent);
});
console.log(secondCellContents);

回答 2 件
  • 次のように、2番目のセルにも同じことを行うことができます。

    var secondCellContents = $('#myTable tbody tr').map(function() {
        return $('td:eq(1)', this).val();
    }).get();
    console.log(secondCellContents);
    
    

    また、 .val()  メソッドは主に、input、select、textarea、 .text() などのフォーム要素の値を取得するために使用されます  は、各要素の結合されたテキストコンテンツを取得するために使用されます。ザ・ .text()  メソッドは、要素ノードだけでなく、テキストおよびCDATAノードの値を返します。

  • これは、独自のコードで動作させる方法です。

    $(document).ready(function(){
      var NumbersArray = $('#myTable td:nth-child(2) input[type="text"]').map(function() {
          return $(this).val();
      }).get();
      
      console.log(NumbersArray); 
      
      //OR
      
      var secondCellContents = [];
      $('#myTable tbody tr').each(function () {
         var $secondCell = $(this).children('td:eq(1)');
         secondCellContent = $secondCell.find('input').val();
         secondCellContents.push(secondCellContent);
      });
      
      console.log(secondCellContents);
      
    });
    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id='myTable'>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td><input type='text' value="1" /></td>
        <td></td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td><input type='text' value="2" /></td>
        <td></td>
      </tr>
      <tr>
        <td>Row 3</td>
        <td><input type='text' value="3" /></td>
        <td></td>
      </tr>
    </tbody>
    </table>
    
    

あなたの答え