为每列

Question

我有一张表，我想从行td中的textareas中提取数据

见下文

ID  | METHOD | COMPENDIA | SPECS
-----------------------------------
 1  |   ta1   |  ta2      | ta3
    ------------------------------
       ta1b   | ta2b      | ta3b
------------------------------------

ta - textareas，就像在列Method下的那些具有相同的类方法，下一列的compndia和最后一列的规范

我想要做的是，如果在特定的tr＆gt; td中聚焦textarea，我会抓住该行的ID。当我移动到Methods列时，我想获取两个textareas的值，当我移动到下一列时，我想在没有METHOD列的情况下执行相同的操作。无论

，我都会抓取所有列的代码

HTML

<table id="temp_table">
    <thead>
        <th>ID</th>
        <th>METHOD</th>
        <th>SPECS</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>
                <textarea class="method">ta1</textarea>
                <textarea class="method">ta1b</textarea>
            </td>
            <td>
                <textarea class="compendia">ta2</textarea>
                <textarea class="compendia">ta2b</textarea>
            </td>
            <td>
                <textarea class="specs">ta3</textarea>
                <textarea class="specs">ta3b</textarea>
            </td>
        </tr>
    <tbody>
</table>

$('#temp_table tbody tr').focusout(function(){
    var data="";
    test_id =$('.test_id',this).val();
    $('.method',this).each(function(i, val){
        data+=val.value+":";
    });
    methods=data.substring(0, data.length - 1);

    $.post(base_url+'audit/getAuditDataBottom/'+labref+'/'+test_id+'/method/method',{method:methods}, function(response){
        console.log(response);
    });
});

$('#temp_table tbody tr').focusout(function(){
    var data="";
    test_id =$('.test_id',this).val();
    $('.compendia',this).each(function(i, val){
        data+=val.value+":";
    });
    compedias=data.substring(0, data.length - 1);

    $.post(base_url+'audit/getAuditDataBottom/'+labref+'/'+test_id+'/compedia/compedia',{compedia:compedias}, function(response){
        console.log(response);
    });
});

Answer 1

如果没有更改任何内容，您就不需要更新服务器，所以我会在textareas上使用change事件

$('#temp_table textarea').on('change',function(e){
      var postData;

      var type = this.className, 
          $cell = $(this).parent(), 
          test_id =$cell.parent().find('.test_id',this).val(),
          data =  $cell.find('textarea').map(function(){
              return this.value;
          }).get().join(':'),
         url = base_url+'audit/getAuditDataBottom/'+labref+'/'+test_id+'/';

      switch(type){

         case 'method':
           url += 'method/method';
           postData = {method: data}
         break;
      }

     $.post(url, postData , function(response){
           console.log(response);
     });


});

Answer 2

您可以使用xpath

//tr/td/textarea[@class='method'] Selects all the title elements that have a "class" attribute with a value of "method"
//tr/td/textarea[@class='compendia']
//tr/td/textarea[@class='specs']

这里有一些教程：Full code

你表也不对，应该是：

<tr>
    <td>1</td>
    <td>
        <textarea class="method">ta1</textarea>
    </td>
    <td>
        <textarea class="compendia">ta2</textarea>
    </td>
    <td>
        <textarea class="specs">ta3</textarea>
    </td>
</tr>
<tr>
    <td>2</td>
    <td>
        <textarea class="method">ta1b</textarea>
    </td>
    <td>
        <textarea class="compendia">ta2b</textarea>
    </td>
    <td>
        <textarea class="specs">ta3b</textarea>
    </td>
</tr>