我在从html表获取数据时遇到问题

时间:2019-04-06 04:17:16

标签: javascript html

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

的值

我尝试过

SELECT i.id, l.CreateDate, i.departmentname, i.productkey, c.Description
FROM dbo.table i JOIN
     (SELECT l.id, MIN(l.CreateDate) as CreateDate
      FROM dbo.log l
      GROUP BY l.id
     ) l
     ON i.id = l.id JOIN
     dbo.LU_Table c
     ON i.id = c.ID
WHERE l.CreateDate > '2019-04-01' AND
      l.CreateDate < '2019-04-30';

这是我的桌子

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

我希望我的代码能够警告文本字段和文本区域的值,但不会。

谢谢

1 个答案:

答案 0 :(得分:1)

如果想获取输入值,可以:

  1. $(".rubric_table>tbody>tr"),您必须在 添加点击事件。桌子里面有一张桌子(我不认为 是理想的)。为了确保您只在直接tr上添加事件 的.rubric_table

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

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