javascript - 我无法从 html 表中获取数据

Question

我无法从 html 表中获取数据，所有其他教程在 td 标记内都有文本，但我有一个文本字段和一个文本区域，我想获取

的值

我试过了

<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>

这是我的 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>

我原以为我的代码会提醒文本字段和文本区域的值，但事实并非如此。

谢谢

Answer 1

如果你想得到输入的值，你可以:

1. $(".rubric_table>tbody>tr") 你必须使用这个选择器 添加点击事件。你在 table 里面有一张 table (我不认为 是理想的)。确保您只在直接 tr 上添加事件 .rubric_table

的

2. 您必须遍历 th 的每个 input 并获取它们的值。

$(".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>