Question

这是html结构

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
    <thead>
        <tr>
            <th>NAME</th>
            <th>DES</th>
        </tr>
    </thead>
    <tbody id="sub_mission_list">
        <tr>
            <td>Q1</td>
            <td>
                <textarea id="mission_description" name="mission_description">T1</textarea>
            </td>
        </tr>
        <tr>
            <td>Q2</td>
            <td>
                <textarea id="mission_description" name="mission_description">T2</textarea>
            </td>
        </tr>
    </tbody>
</table>

我希望获得<textarea>

中的值

我做了，这是我的解决方案，但我认为这不是一个好方法。实现这一目标的最佳方式是什么？

_.each($('#sub_mission_list tr'), function(value) {
  var describe = $($($(value).children()[1]).children()[0]).val();
  console.log(describe);
});

Answer 1

使用jQuery.each()进行迭代，并使用.find()定位textarea

$('#sub_mission_list tr').each(function() {
  var describe = $(this).find('textarea').val();
  console.log(describe);
});

$('#sub_mission_list tr').each(function() {
  var describe = $(this).find('textarea').val();
  console.log(describe);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table class="table">
    <thead>
      <tr>
        <th>NAME</th>
        <th>DES</th>
      </tr>
    </thead>
    <tbody id="sub_mission_list">
      <tr>
        <td>Q1</td>
        <td>
          <textarea id="mission_description" name="mission_description">T1</textarea>
        </td>
      </tr>
      <tr>
        <td>Q2</td>
        <td>
          <textarea id="mission_description" name="mission_description">T2</textarea>
        </td>
      </tr>
    </tbody>
  </table>
</body>

注意：HTML中的标识符必须是唯一的。

Answer 2

您可以通过更新选择器迭代textarea并使用each()方法迭代jQuery集合。

// To get the textarea within the second td, update selector
// to more specific `$('#sub_mission_list tr td:nth-child(2) textarea')`
$('#sub_mission_list tr td textarea').each(function() {
  var describe = this.value; // get the text value
  console.log(describe);
});

＆＃13;

// To get the textarea within the second td, update selector
// to more specific `$('#sub_mission_list tr td:nth-child(2) textarea')`
$('#sub_mission_list tr td textarea').each(function() {
  var describe = this.value; // get the text value
  console.log(describe);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table class="table">
    <thead>
      <tr>
        <th>NAME</th>
        <th>DES</th>
      </tr>
    </thead>
    <tbody id="sub_mission_list">
      <tr>
        <td>Q1</td>
        <td>
          <textarea id="mission_description" name="mission_description">T1</textarea>
        </td>
      </tr>
      <tr>
        <td>Q2</td>
        <td>
          <textarea id="mission_description" name="mission_description">T2</textarea>
        </td>
      </tr>
    </tbody>
  </table>
</body>

＆＃13;

如果您想将结果作为数组获取，请使用map()方法和get()方法。

var res = $('#sub_mission_list tr td textarea').map(function() {
  return this.value; // get the text value
}).get();

＆＃13;

var res = $('#sub_mission_list tr td textarea').map(function() {
  return this.value; // get the text value
}).get();

console.log(res);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table class="table">
    <thead>
      <tr>
        <th>NAME</th>
        <th>DES</th>
      </tr>
    </thead>
    <tbody id="sub_mission_list">
      <tr>
        <td>Q1</td>
        <td>
          <textarea id="mission_description" name="mission_description">T1</textarea>
        </td>
      </tr>
      <tr>
        <td>Q2</td>
        <td>
          <textarea id="mission_description" name="mission_description">T2</textarea>
        </td>
      </tr>
    </tbody>
  </table>
</body>

＆＃13;

Answer 3

直接使用文字区$('#sub_mission_list tr td textarea').each(function() {

Answer 4

使用输入类型选择器。

＆＃13;

$.each($('#sub_mission_list textarea'), function(value) {
  var describe =$(this).val();
  console.log(describe);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table class="table">
        <thead>
            <tr>
                <th>NAME</th>
                <th>DES</th>
            </tr>
        </thead>
        <tbody id="sub_mission_list">
            <tr>
                <td>Q1</td>
                <td>
                    <textarea id="mission_description" name="mission_description">T1</textarea>
                </td>
            </tr>
            <tr>
                <td>Q2</td>
                <td>
                    <textarea id="mission_description" name="mission_description">T2</textarea>
                </td>
            </tr>
        </tbody>
    </table>

＆＃13;

Answer 5

你也可以使用.find的jquery

在表格中搜索

    var getValues = $('#sub_mission_list').find('textarea');

    getValues.each(function(){
        console.log($( this ).val());
    });

jQuery在tr中获取子文本

5 个答案: