通过Jquery遍历方法获取表格单元格文本

时间:2016-07-15 13:18:19

标签: jquery ajax

我有这个结构

<tr>
   <th>some text0</th>
   <th>some text1</th>
   <th>some text2</th>
   <td class="edit"><button>Edit</button></td>
</tr>

当点击编辑按钮时,我想取“一些文字0,1和2”并将其放在表格内。

我尝试使用JQuery Traversing中的方法,但没有成功。

一个例子

$(document.body).on('click', '.edit' ,function(){
   var takeit = $(this).parent('tr th:eq(0)').html();
   $('.a_input_for_my_form').val(takeit);;
});

另一个

$(document.body).on('click', '.edit' ,function(){
  var father = $(this).parent('tr th:eq(0)');
  var child  = $(father).child('th').html();
  $('.a_input_for_my_form').val(child);
});

2 个答案:

答案 0 :(得分:1)

我猜你猜到了什么?如果不让我知道

$(document.body).on('click', '.edit' ,function(){
   var takeit = $(this).closest('tr').find('th').eq(0).html();
   $('.a_input_for_my_form').val(takeit);
});

DEMO

答案 1 :(得分:1)

我创建了两个演示,并将每个演示附加到另一个按钮

其中一个演示可能会有所帮助

$('#btn1').click(function(){
  //Grabs all text in all `th`
  var txt = $('table tr th').text();
  $('.myInput').val(txt);
});

$('#btn2').click(function(){
  //Iterates through each `th`, sticks text into array, converts to string
  var txt = [];
  $('table tr th').each(function(){
    txt.push( $(this).text() );
  });
  $('.myInput').val(txt.join(", ") );
});
*{position:relative;}
form{margin-top:15px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
   <th>some text0</th>
   <th>some text1</th>
   <th>some text2</th>
</tr>
<tr>
   <td class="edit"><button id="btn1">Edit1</button></td>
   <td class="edit"><button id="btn2">Edit2</button></td>
</tr>

</table>
<form>
  <input class="myInput" type="text" />
</form>