Как выполнить итерацию по строкам таблицы и получить значения ячеек с помощью jQuery

Я динамически создаю таблицу ниже с помощью jQuery... После выполнения моего кода я получаю таблицу, как показано ниже:

<table id="TableView" width="800" style="margin-left: 60px">
<tbody>
 <tr>
 <th>Module</th>
 <th>Message</th>
</tr>
<tr class="item">
 <td> car</td>
 <td>
  <input class="name" type="text">
 </td>
 <td>
<input class="id" type="hidden" value="5">
</td>
   </tr>
<tr class="item">
 <td> bus</td>
 <td>
  <input class="name" type="text">
 </td>
 <td>
<input class="id" type="hidden" value="9">
</td>
  </tr>

Я использовал для итерации таблицы следующим образом:

 $("tr.item").each(function() {
            var quantity1 = $this.find("input.name").val();
        var quantity2 = $this.find("input.id").val();

            });

Используя вышеприведенный запрос, я получаю только значения ячеек первой строки... помогите мне с jQuery, который будет выполнять итерацию по всем строкам таблицы и получить значения ячейки строки в quantity1 и quantity2.

Ответы

Ответ 1

$(this) вместо $this

$("tr.item").each(function() {
        var quantity1 = $(this).find("input.name").val(),
            quantity2 = $(this).find("input.id").val();
});

Proof_1:

proof_2:

Ответ 2

Привет всем спасибо за помощь ниже, это рабочий код для моего вопроса

                      $("#TableView tr.item").each(function() {

            var quantity1=$(this).find("input.name").val();
            var quantity2=$(this).find("input.id").val();


            });

Ответ 3

Вы получили свой ответ, но зачем перебирать tr, если вы можете пойти прямо на вход? Таким образом, вы можете легче хранить их в массиве и уменьшать количество запросов CSS. Зависит от того, что вы хотите делать, конечно, но для сбора данных это более гибкий подход.

http://jsfiddle.net/zqpgq/

var array = [];

$("tr.item input").each(function() {
    array.push({
        name: $(this).attr('class'),
        value: $(this).val()
    });
});

console.log(array);

Ответ 4

Цитирование по таблице для каждой строки и чтение значения 1-го столбца выполняется с использованием JQuery и DOM-логики.

var i = 0;
var t = document.getElementById('flex1');

$("#flex1 tr").each(function() {
    var val1 = $(t.rows[i].cells[0]).text();
    alert(val1) ;
    i++;
});

Ответ 5

I got it and explained in below:                    
//This table with two rows containing each row, one select in first td, and one input tags in second td and  second input in third td;
<table id="tableID" class="table table-condensed">
                                            <thead>
                                                <tr>
                                                    <th><label>From Group</lable></th>
                                                    <th><label>To Group</lable></th>
                                                    <th><label>Level</lable></th>



                                                </tr>
                                            </thead>
                                            <tbody>
                <tr id="rowCount"><td><select ><option value="">select</option><option value="G1">G1</option><option value="G2">G2</option><option value="G3">G3</option><option value="G4">G4</option></select></td><td><input type="text" id="" value="" readonly="readonly" /></td><td><input type="text" value=""  readonly="readonly" /></td></tr>
             <tr id="rowCount"><td><select ><option value="">select</option><option value="G1">G1</option><option value="G2">G2</option><option value="G3">G3</option><option value="G4">G4</option></select></td><td><input type="text" id="" value="" readonly="readonly" /></td><td><input type="text" value=""  readonly="readonly" /></td></tr>
                </tbody>


                                            </table>

        <button type="button"
                                        class="btn btn-default generate-btn search-btn white-font border-6 no-border"
                                        id="saveDtls">Save</button>


                    //call on click of Save button;
                    $('#saveDtls').click(function(event) {

                    var TableData = []; //initialize array;

                        var data=""; //empty var;
                            //Here traverse and  read input/select values present in each td of each tr, ;
                        $("table#tableID > tbody > tr").each(function(row, tr) {

                         TableData[row]={
                        "fromGroup":  $('td:eq(0) select',this).val(),
                        "toGroup": $('td:eq(1) input',this).val(),
                        "level": $('td:eq(2) input',this).val()


                        };

                        //Convert tableData array to JsonData
                        data=JSON.stringify(TableData)
                        //alert('data'+data);


                        });

    });