jQuery를 사용하여 표 행을 반복하고 셀 값을 가져오는 방법

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.

$(this)이것 대신에

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

증명_1

증명_2

각 행에 대한 테이블을 루프하고 첫 번째 열 값을 읽는 것은 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++;
});

안녕하세요 여러분 아래의 도움에 감사드립니다 제 질문에 대한 작업 코드입니다.

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

저는 그것을 이해했고 아래에서 설명했습니다.

//이 표는 각 행이 포함된 두 개의 행, 첫 번째 td에서 한 개의 선택, 두 번째 td에서 한 개의 입력 태그, 세 번째 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); 
  });
});

당신은 답을 얻었지만, 당신은 입력을 위해 곧장 갈 수 있는데 왜 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);​

언급URL : https://stackoverflow.com/questions/10434711/how-to-iterate-through-a-table-rows-and-get-the-cell-values-using-jquery