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

时间:2019-04-26 09:33:52

标签: javascript php jquery html

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

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

首先,我遍历每个表格行和单元格,然后将文本放入数组中。 它起作用了,但是后来我注意到,当我编辑文本区域时,不会采用更新的值。首先,我有.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();

但是我不知道如何调用textarea的ID。还是有更简单的方法做到这一点?

希望,您了解问题并可以为我提供帮助。 抱歉,没有完美的英语,我是德语,也是我的第一个问题:)

2 个答案:

答案 0 :(得分:0)

您可以使用map遍历每个tr。使用ID作为属性名称和值将find的所有textareareduce 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>
*/1 * * * * $HOME/.bash_profile;/home/ec2-user/MYVENV/bin/python /home/ec2-user/code/green_brick_django/pricecomparison_project/pricecomparison/run_cronjob_script.sh > /tmp/cronlog.txt 2>&1

答案 1 :(得分:0)

以另一种方式解决了它。我用一个计数器完成此操作,每次通过计数器时都会经过一个文本区域。

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