javascript - jQuery get children text in tr

Here is the html structure

<script src=".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>

Here is the html structure

<script src="https://ajax.googleapis./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>

I want to get the value in <textarea>

I did and here is my solution, but I don't think it's a good way to do it. What's the best way to achieve that?

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

Share Improve this question edited Mar 7, 2017 at 10:06 Tân 1 asked Mar 7, 2017 at 9:55 rj487 4,6347 gold badges49 silver badges94 bronze badges

1 Use a class instead of an id (which isn't supposed to be duplicated in the same document) and you can use the class selector. $('.mission_description', $value) – Pekka Commented Mar 7, 2017 at 9:56
iterate using each and get the values – Pandiyan Cool Commented Mar 7, 2017 at 10:00

Add a ment |

5 Answers 5

Sorted by: Reset to default 2

Use jQuery.each() for iteration, and use .find() to target 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./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>

Note: Identifiers in HTML must be unique.

You can iterate over the textarea by updating the selector and use each() method to iterate over the jQuery collection.

// 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);
});

// 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);
});

<script src="https://ajax.googleapis./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>

In case you want to get the result as an array then use map() method along with get() method.

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

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

console.log(res);

<script src="https://ajax.googleapis./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>

use text area direct $('#sub_mission_list tr td textarea').each(function() {

Use input type selector.

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

<script src="https://ajax.googleapis./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>

also you can search in table using .find of jquery

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - jQuery get children text in tr - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)