Im having trouble getting data from a html table

Question

Im having trouble getting data from a html table all the other tutorials have text inside the td tag but I have a textfield and a textarea which I want to get the value of

I have tried

<script>
  $(document).ready(function() {
        //click on table body
        $(".rubric_table tbody tr").on("click", function() {
            var tableData = $(this).children("td").map(function() {
                return $.trim($(this).text());
            }).get();
            var td = tableData[0]+'*'+tableData[1]+'*'+tableData[2]+'*'+tableData[3]+'*'+tableData[4];

        })
    })

</script>

And this is my table

 <table class="rubric_table" id="rubricTable">
          <thead>
                <tr class="header-row">
                  <th>
                    <span>Criteria</span>
                  </th>
                  <th class="grading_scale">
                    <span>Grading scale</span>
                  </th>
                  <th style="width: 60px;">
                    <span>Pts</span>
                  </th>
                </tr>
                <tbody></tbody>
                <tbody>
                  <tr class="rubric_row">
                    <td class="rubric_row_title">
                      <div class="rubric_row_relative">
                        <input type="text" placeholder="Add Title" class="rubric_title no_border_input">
                        <div class="rubric_row_details">
                        <textarea  placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
                        </div>
                      </div>
                    </td>
                    <td>
                      <table class="grading-table">
                        <tbody>
                          <tr>
                            <td class="grading-wrapper">
                              <div class="grading-item first_grading_item">
                                <input type="text" class="no_border_input" value="4">
                                <textarea class="no_border_input_textarea">Excellent</textarea>
                              </div>
                            </td>
                            <td class="grading-wrapper">
                              <div class="grading-item">
                                <input type="text" class="no_border_input" value="4">
                                <textarea class="no_border_input_textarea">Excellent</textarea>
                              </div>
                            </td>
                            <td class="grading-wrapper">
                              <div class="grading-item">
                                <input type="text" class="no_border_input" value="4">
                                <textarea class="no_border_input_textarea">Excellent</textarea>
                              </div>
                            </td>
                            <td class="grading-wrapper">
                              <div class="grading-item">
                                <input type="text" class="no_border_input" value="4">
                                <textarea class="no_border_input_textarea">Excellent</textarea>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                    <td class="rubric-row-pts">
                      <div class="rubric_points">
                        <input type="text" class="no_border_input" value="40">
                      </div>
                    </td>
                  </tr>
                </tbody>
          </thead>
      </table>

I expected that my code would alert the values of the textfield and textarea but it doesn't.

Thanks

Answer 1

If you wan to get the values of the input, you can:

1. $(".rubric_table>tbody>tr") you have to use this selector in adding click event. You have a table inside the table (I dont think is ideal). To make sure you are only adding event on the direct tr of .rubric_table

2. You have to loop thru each input of th and get their values.

$(".rubric_table>tbody>tr").on("click", function() {
  var tableData = $(this).children("td").map(function() {
    return $(this).find('input').map(function() {
      return this.value;
    }).get();
  }).get();

  console.log(tableData);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="rubric_table" id="rubricTable">
  <thead>
    <tr class="header-row">
      <th>
        <span>Criteria</span>
      </th>
      <th class="grading_scale">
        <span>Grading scale</span>
      </th>
      <th style="width: 60px;">
        <span>Pts</span>
      </th>
    </tr>
    <tbody></tbody>
    <tbody>
      <tr class="rubric_row">
        <td class="rubric_row_title">
          <div class="rubric_row_relative">
            <input type="text" placeholder="Add Title" class="rubric_title no_border_input">
            <div class="rubric_row_details">
              <textarea placeholder="Add Description" style="overflow: hidden; height: 32px;" class="no_border_input_textarea"></textarea>
            </div>
          </div>
        </td>
        <td>
          <table class="grading-table">
            <tbody>
              <tr>
                <td class="grading-wrapper">
                  <div class="grading-item first_grading_item">
                    <input type="text" class="no_border_input" value="4">
                    <textarea class="no_border_input_textarea">Excellent</textarea>
                  </div>
                </td>
                <td class="grading-wrapper">
                  <div class="grading-item">
                    <input type="text" class="no_border_input" value="4">
                    <textarea class="no_border_input_textarea">Excellent</textarea>
                  </div>
                </td>
                <td class="grading-wrapper">
                  <div class="grading-item">
                    <input type="text" class="no_border_input" value="4">
                    <textarea class="no_border_input_textarea">Excellent</textarea>
                  </div>
                </td>
                <td class="grading-wrapper">
                  <div class="grading-item">
                    <input type="text" class="no_border_input" value="4">
                    <textarea class="no_border_input_textarea">Excellent</textarea>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
        <td class="rubric-row-pts">
          <div class="rubric_points">
            <input type="text" class="no_border_input" value="40">
          </div>
        </td>
      </tr>
    </tbody>
  </thead>
</table>