如何调用嵌套在表格单元格中的文本区域的属性?

Question

我有一个网站，我可以在其中上传Excel工作表，该工作表将以表格的形式打印在网站上。表格的某些单元格具有可以编辑的文本区域。表格的末尾是一个按钮，应将所有内容保存在数组中。

该表有 3 列和许多行。第 2 列和第 3 列具有嵌套在表格单元格中的文本区域。现在我想将文本区域值存储在 JS 中的数组中，调用当前文本区域的 Id。文本区域的 ID 是动态给出的，数组也应该动态填充。我想遍历所有表格单元格并保存当前表格单元格/文本区域的值。表格单元格没有问题。但是文本区域的东西不起作用。

首先，我遍历了每个表格行和单元格，并将文本放入数组中。 它有效，但后来我注意到，当我编辑文本区域时，没有采用更新的值。首先，我有 .text()，然后我尝试了 .val()，但没有奏效。 我认为问题是我在"td"上调用 .val() 它是 ">

.PHP：

echo '<td><textarea class="form-control" style="overflow:hidden; resize:none; min-height:62px;" onkeyup="auto_grow(this)" cols="10" id="ta'.$taID.'" type=text style="border:none">' . ( ! empty( $r[ 1 ] ) ? $r[ 1 ] : '&nbsp;') . '</textarea></td>';
$taID++;

.JS：

var tableData = new Array(5);
$('#tblAusgabe tr').each(function(row, tr){
for(var i=0;i<3;i++){
var inputString = $(tr).find('td:eq('+i+')').text();
if(i==0){
tableData[arrIndex][mitarbeiterCount][i] = 
inputString.substr(2,inputString.length-3);
}
else if(i==1){
tableData[arrIndex][mitarbeiterCount][i] = inputString;
}
else{
var taid=$(tr).find('td:eq('+i+')').attr('id'); // not working
console.log("1."+$(tr).find('td:eq('+i+')').attr('id')); //test
console.log("2."+taid);                                  //test
tableData[arrIndex][mitarbeiterCount][i] = $(this).val();
}
}
}

我想要类似的东西

var id = $(thisElement).attr('id');
array[index]= $(id).val();

但是我不知道如何调用文本区域的ID。或者有没有更简单的方法可以做到这一点？

希望你理解问题所在，可以帮助我。 抱歉没有完美的英语，我是德国人，这是我的第一个问题:)

Answer 1

您可以使用map遍历每个tr。 使用 id 作为属性名称和值find对象的所有textarea和reduce。

var result = $('#tblAusgabe tr').map(function(i, o) {
return $(o).find('textarea').get().reduce(function(c, v) {
c[v.id] = v.value;
return c;
}, {});
}).get();
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblAusgabe">
<tr>
<td>1</td><td><textarea id="ta01a">apple</textarea></td><td><textarea id="ta01b">orange</textarea></td>
</tr>
<tr>
<td>1</td><td><textarea id="ta02a">red</textarea></td><td><textarea id="ta02b">blue</textarea></td>
</tr>
<tr>
<td>1</td><td><textarea id="ta03a">php</textarea></td><td><textarea id="ta03b">javascript</textarea></td>
</tr>
</table>

Answer 2

以另一种方式解决了它。我用计数器做了这件事，每次文本区域通过计数器时，都会数 1 个。

tableData[arrIndex][mitarbeiterCount][i]=document.getElementById("ta"+count).value;
count++;