如何调用嵌套在表格单元格中的textarea属性？

Question

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

表格有3列和许多行。第2列和第3列中有嵌套在表格单元格中的文本区域。现在，我想通过调用当前文本区域的Id将文本区域值存储在JS数组中。文本区域的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。或者有更简单的方法吗？

希望你能理解问题并帮助我。 抱歉我的英语不太好，我是德国人，这是我的第一个问题 :)

- Eddy_SPL

---

你能发布一个输出的样本结构吗？以及示例HTML表格。 - Eddie

你是什么意思？ - Eddy_SPL

你的结果数组长什么样，@Eddy_SPL？ - Deepak A

我的表格有5个标题，所以3D数组的第一个索引是标题，第二个是行，第三个是列。 - Eddy_SPL

我想在运行时遍历每个表单格并对单元格的值进行操作。在运行时，难道不能获取当前文本区域的ID吗？ - Eddy_SPL

Answer 1

用另一种方法解决了。我使用了一个计数器，每次通过一个文本区域时，计数器就会加1。

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

- Eddy_SPL

Answer 2

你可以使用 map 循环遍历每个 tr。使用 find 查找所有的 textarea 并使用 id 作为属性名和值来将其 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>

- Eddie