Question

我有一个页面，其中有一个表格，表格中的单元格中有输入字段，我想从一行到另一行，从一个单元格跳转到另一个单元格，以使用javascript / jquery获得该值。我可以访问单元格，但是还没有找到访问单元格内元素的方法。

我尝试过

$('#tblIssues tr:eq(1) td:eq(1)').html()

，它返回我td内的html代码，但不返回值。

单元格表中的元素可以是文本区域，输入文本或组合框。我想要该元素的值。

我想使用诸如double之类的东西来遍历表格并将该信息保存到数组中。

Answer 1

如果要创建二维值数组，请使用嵌套的.map()调用来循环浏览第一维的行和第二维的所有输入字段。

使用输入的.value属性获取当前值。

var valArray = $.each("#tblIssues tr").map(function() {
    return $(this).find(":input").map(function() {
        return this.value;
    }).get();
}).get();

Answer 2

如果我理解您的问题，您希望从表中获取输入元素的值？并且您希望分别返回所有这些值？ html用于获取元素的内容，即：

$(function() {
$("div.header").html();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headercontainer">
<div class="header">Hello World!</div>
</div>

将返回：

Hello World!

我认为最好查看https://api.jquery.com/html/以获得更多信息，因为它也可以用于显示容器中的实际html等。

获取每个输入字段的值的一种方法是使用与每个输入类似的class，您可以将多个类分隔成一个空格，然后再调用该空格。像这样：




function Myfunc() {
var totals = 0;
$(".classa").each(function() {
totals += +$(this).val();
});
$("#total").val(totals);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table> 
<tr>
<td>
<form>
<input type="text" class="classa classb classc" value="1" id="id1">
<input type="text" class="classa classd classe" value="2" id="id2">
<input type="text" class="classa classf classg" value="3" id="id3">
</form>
</td>
</tr>
</table>
<br>
<input type="button" class="button" id="getvalue" value="Add up values!" onclick="Myfunc()">
<br>
<label for="total">
<input type="text" class="total" id="total">
</label>

如果您希望将文本值加在一起构成一个句子，或者这样的事情可能会让您更感兴趣：

function Myfunc() {
var totals = 0;
$(".classa").each(function() {
totals += +$(this).val();
});
$("#total").val(totals);
}

也许这个答案有帮助，也许没有帮助，我对Jquery和JavaScript还是很陌生，但我希望它能做到。

Answer 3

在一行普通的JavaScript中-每个表单字段的每个值都可以作为数组收集。

将<table>包裹在<form>标记中
```
<form><table>...</table></form>
```
引用表单（[0]将指向页面上的第一个表单标签）
```
document.forms[0]
```
将 all form controls 收集为HTML集合（类似数组的对象）
```
.elements
```
将HTML集合转换为数组
```
Array.from(...)
```
对于数组中的每个字段，请在新数组中返回其值
```
.map(field => field.value)
```

演示

const values = Array.from(document.forms[0].elements).map(field => field.value);
console.log(values);

.as-console-wrapper {
  width: 20%;
  margin-left:80%;
  overflow-y:scroll
}
.as-console-row.as-console-row::after {
  content:'';
  padding:0;
  margin:0;
  border:0;
  width:0;
}

<form>
<table>
  <tr><td><input value='A'></td><td><select><option value='A'>A</option><option value='B' selected>B</option><option value='C'>C</option></select></td><td><textarea>ABC</textarea></td></tr>
  <tr><td><input value='D'></td><td><select><option value='D'>D</option><option value='E'>E</option><option value='F' selected>F</option></select></td><td><textarea>DEF</textarea></td></tr>
  <tr><td><input value='G'></td><td><select><option value='G' selected>G</option><option value='H'>H</option><option value='I'>I</option></select></td><td><textarea>GHI</textarea></td></tr>
  <tr><td><input value='J'></td><td><select><option value='J'>J</option><option value='K' selected>K</option><option value='L'>L</option></select></td><td><textarea>JKL</textarea></td></tr>
  <tr><td><input value='M'></td><td><select><option value='M'>M</option><option value='N'>N</option><option value='O' selected>O</option></select></td><td><textarea>MNO</textarea></td></tr>
  <tr><td><input value='P'></td><td><select><option value='P' selected>P</option><option value='Q'>Q</option><option value='R'>R</option></select></td><td><textarea>PQR</textarea></td></tr>
  <tr><td><input value='S'></td><td><select><option value='S'>S</option><option value='T' selected>T</option><option value='U'>U</option></select></td><td><textarea>STU</textarea></td></tr>
  <tr><td><input value='V'></td><td><select><option value='V'>V</option><option value='W'>W</option><option value='X' selected>X</option></select></td><td><textarea>VWX</textarea></td></tr>
  <tr><td><input value='Y'></td><td><select><option value='Y'>Y</option><option value='Z' selected>Z</option></select></td><td><textarea>YZ</textarea></td></tr>
</table>
</form>

从html表中的元素获取值

3 个答案:

演示