Question

我有一个带有Flask输入的表格，表格的某些字段为用户提供了输入框。我正在努力获得他们输入的内容的价值，而我正在努力。我认为这对这里的人来说是一个简单的问题，但是我已经将头撞在桌子上了一段时间，并在这里搜索论坛，而没有弄清楚我在做什么错。

我创建了一个类似于但更简单的HTML表，供我们使用。我还无法进入单选按钮部分，因为我仍在尝试解决输入框部分，但是我将需要同时解决这两个问题。理想情况下，我将每行返回一个JSON数组。

我包含的JQuery返回“无法读取未定义的属性'GetElementsByTagName'”，但这只是我尝试的许多示例之一，没有获得任何成功。我已经测试了.value，.text，.innerHTML的变体，但是我无法获取框内的内容（或者单选按钮的值）。

对JS新手有帮助吗？

//$('.tableRow').each(function() {
//  favoriteBeer = document.getElementsByClassName('favoriteBeer').document.GetElementsByTagName('input');
//  console.log(favoriteBeer);
//});

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Favorite Food</th>
      <th>Favorite Beer</th>
    </tr>
  </thead>
  <tbody>
    <tr class='tableRow'>
      <td>John</td>
      <td>30</td>
      <td><label><input type="radio" name="favoriteFood1" value="Pizza"/>Pizza</label><label><input type="radio" name="favoriteFood1" value="Tacos" />Tacos</label>
        <td><input type="text" class="favoriteBeer"></td>
    </tr>
    <tr class='tableRow'>
      <td>Joe</td>
      <td>25</td>
      <td><label><input type="radio" name="favoriteFood2" value="Pizza"/>Pizza</label><label><input type="radio" name="favoriteFood2" value="Tacos"/>Tacos</label>
        <td><input type="text" class="favoriteBeer"></td>
    </tr>
    <tr class='tableRow'>
      <td>Sam</td>
      <td>50</td>
      <td><label><input type="radio" name="favoriteFood3" value="Pizza"/>Pizza</label><label><input type="radio" name="favoriteFood3" value="Tacos"/>Tacos</label>
        <td><input type="text" class="favoriteBeer"></td>
    </tr>
  </tbody>
</table>

Answer 1

您无法在document.getElementsByTagName()的结果上调用.getElementsByClassName()，因为.getElementsByClassName()返回一个“节点列表”，并且节点列表没有document属性。但是您可以这样做：

favoriteBeer = document.getElementsByClassName('favoriteBeer').getElementsByTagName('input');

因为大多数DOM查询方法都可以在document，节点或节点列表上调用。

但是，.getElementsByClassName()和.getElementsByTagName()都返回“活动”节点列表，这意味着，每次引用分配了结果的变量时，都必须重新扫描整个文档以确保您获得最新的结果。仅当您具有动态创建/销毁的元素时，这才有价值。如果您不使用这种代码，则不建议使用这些方法，因为它们在性能方面非常浪费。

现在，由于您正在使用JQuery，因此应始终使用它。只需将有效的CSS选择器传递到JQuery对象中，即可扫描DOM以查找匹配的元素。

因此，您可以简单地将类名传递到JQuery中，以获得对DOM对象的一组引用，然后获取那些value元素的input属性。但是，您确实必须等待运行该代码，直到用户有机会输入一些数据为止。我在代码中添加了一个button元素，当您准备查看输入值时可以单击它。

$("button").on("click", function(){
  // Just passing a valid CSS selector to the JQuery object will
  // return a JQuery "wrapped set" of all matching elements.
  
  // Then, the .each() method takes a function that will automatically
  // be passed the index of the current element being iterated, a DOM reference
  // to the element itself, and a reference to the wrapped set (not used here).
  $('.favoriteBeer').each(function(index, element) {
   // You can use the element argument inside of the .each() loop
   // or you can use the "this" keyword to get the same DOM reference
   console.log(element.value, this.value);
  });
});

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Favorite Food</th>
      <th>Favorite Beer</th>
    </tr>
  </thead>
  <tbody>
    <tr class='tableRow'>
      <td>John</td>
      <td>30</td>
      <td><label><input type="radio" name="favoriteFood1"/>Pizza</label><label><input type="radio" name="favoriteFood1" />Tacos</label>
        <td><input type="text" class="favoriteBeer"></td>
    </tr>
    <tr class='tableRow'>
      <td>Joe</td>
      <td>25</td>
      <td><label><input type="radio" name="favoriteFood2"/>Pizza</label><label><input type="radio" name="favoriteFood2" />Tacos</label>
        <td><input type="text" class="favoriteBeer"></td>
    </tr>
    <tr class='tableRow'>
      <td>Sam</td>
      <td>50</td>
      <td><label><input type="radio" name="favoriteFood3"/>Pizza</label><label><input type="radio" name="favoriteFood3" />Tacos</label>
        <td><input type="text" class="favoriteBeer"></td>
    </tr>
  </tbody>
</table>
<button type="button">Get Data</button>

Answer 2

在x // 3 + (y // 3) * num_squares_per_row的帮助下使用count循环获取每一行的相关值，并使用for作为选择器来获取选定的单选按钮，如：

$(this)

input:radio:checked

$('button').click(function() {
  $('.tableRow').each(function() {
    var favoriteBeer = $(this).find('.favoriteBeer').val();
    var favoriteFood = $(this).find('input:radio:checked').val();

    var dataObj = {
      favoriteBeer: favoriteBeer,
      favoriteFood: favoriteFood
    };

    console.log(dataObj);
  });
})

Answer 3

您不能运行以下行：

favoriteBeer = document.getElementsByClassName('favoriteBeer').document.GetElementsByTagName('input');

因为元素document的{{1}}未定义。

此外，当.favoriteBeer运行时，输入字段为空，因为它在加载页面时运行。因此，您可以做的是监听keyup事件，并在每次用户键入内容时检查输入的当前值。

像这样：

$('.tableRow').each(function()

$('.favoriteBeer').keyup(function() {
  console.log($(this).val());
});

table {
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid black;
}

JavaScript / JQuery从表的输入框中获得价值

3 个答案: