Javascript / JQuery从表上的输入框中获取值

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

您不能在.getElementsByClassName()的结果上调用document.getElementsByTagName() ，因为.getElementsByClassName()返回“节点列表”，而节点列表没有document属性。 但你可以这样做：

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

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

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

---

现在，既然您正在使用JQuery，那么您应该始终如一地使用它。 只需将有效的CSS选择器传递给JQuery对象，即可扫描DOM以查找匹配的元素。

因此，您只需将类名传递给JQuery即可获得对DOM对象的一组引用，然后获取这些input元素的value属性。 但是，在用户有机会输入某些数据之前，您必须等待运行该代码。 我已经为您的代码添加了一个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

在$(this)的帮助下使用for循环来获取每一行的相关值，并使用input:radio:checked获取所选单选按钮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); }); }) 

 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> <button type="button">Retrieve Data</button> 

Answer 3

你不能运行这一行：

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

因为元素.favoriteBeer document未定义。

此外，当$('.tableRow').each(function()运行时，输入字段为空，因为它在页面加载时运行。所以你可以做的是监听keyup事件并检查当前值每次用户输入内容时输入。

像这样：

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

 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>