テーブル内に入力値を取得する

Question

私は次のようなボタンを備えたテーブルを持っています。私はjQueryを使ってtdの値を取得しようとしています。

マイテーブル：

$('#btnSave').click(function() { 

    $('#Tablesample tr').each(function() { 

     var row = $(this).closest("tr"); // Find the row 
     var text = row.find(".keyvalue").text(); // Find the text 
     var keval = text.find("input").text(); 

     alert(keval); 
    }); 

}); 

を、私はすべての値を取得していないよ：

<table class="table" id="Tablesample"> 

    <tr> 
     <th style="display:none;"> 
      @Html.DisplayNameFor(model => model.Id) 
     </th> 

    </tr> 

    @foreach (var item in Model) 
    { 
     <tr> 
      <td style="display:none;" class="keyvalue"> 
       <input type="text" name="Key" value="@item.Key" class="form-control" id="configKey" readonly="readonly"> 
      </td> 
      <td> 
       <input type="text" name="Key" value="@item.Id" class="form-control" id="configId" readonly="readonly"> 
      </td> 
     </tr> 

    } 

</table> 

<button id="btnSave">Save</button> 

はその後、私はjqueryのを使用して値を取得しようとしています。

また、私はこのような何かをしようとしたが、それはどちらか動作しません：

$("#Tablesample tr:gt(0)").each(function() { 

    var this_row = $(this); 
    var key = $.trim(this_row.find('td:eq(0)').html()); 
    alert(key); 
}); 

Answer 1

問題は、あなたのDOMのトラバーサルロジックによるものです。まずthisはtrの要素なので、closest('tr')は何も見つかりません。次に、text()の文字列値を.keyvalueにしてから、DOM内を移動する代わりにinput要素をテキスト内に見つけようとしています。最後に、入力値を取得するにはval()を使用する必要があります。

私は強くあなたはjQueryの公開し、彼らがどのように動作するかの方法を理解勧めしたい：これはあなたのために働く必要がある、と述べているすべてでhttp://api.jquery.com

：

$('#btnSave').click(function() { 
 
    $('#Tablesample tr').each(function() { 
 
    var keval = $(this).find(".keyvalue input").val(); 
 
    console.log(keval); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" id="Tablesample"> 
 
    <tr> 
 
    <th style="display:none;"> 
 
     Model 
 
    </th> 
 
    </tr> 
 
    <tr> 
 
    <td style="display:none;" class="keyvalue"> 
 
     <input type="text" name="Key" value="Key1" class="form-control" id="configKey" readonly="readonly"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="Key" value="Id1" class="form-control" id="configId" readonly="readonly"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="display:none;" class="keyvalue"> 
 
     <input type="text" name="Key" value="Key2" class="form-control" id="configKey" readonly="readonly"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="Key" value="Id2" class="form-control" id="configId" readonly="readonly"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="display:none;" class="keyvalue"> 
 
     <input type="text" name="Key" value="Key3" class="form-control" id="configKey" readonly="readonly"> 
 
    </td> 
 
    <td> 
 
     <input type="text" name="Key" value="Id3" class="form-control" id="configId" readonly="readonly"> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 
<button id="btnSave">Save</button>

最初の値はundefinedで、最初の行のth要素にはinput要素が含まれていないことに注意してください。その行を除外するには、thead/tbodyを使用して表を区切ることをお勧めします。