onChange事件不适用于动态表，它将在页面加载时读取表的数据。编辑数据后，它将在编辑之前读取数据，而不是显示已编辑的数据。 这是我的代码：
<script type="text/javascript">
$('#tableDat1').on("change",function(){
// $('#tableBody').change(function() {
var TableData = new Array();
$('#tableDat1 tr' ).each(function(row, tr){
TableData[row]={
"productName" : $(tr).find('td:eq(0)').text()
//"productName" : $(this).find('td:eq(0)').text();
, "instance_name" : $(tr).find('td:eq(1)').text()
, "steps" :$(tr).find('td:eq(2)').text()
, "workAround" : $(tr).find('td:eq(3)').text()
, "resolution" : $(tr).find('td:eq(4)').text()
, "startingImpactDate" : $(tr).find('td:eq(5)').text()
, "endImpactDate" : $(tr).find('td:eq(6)').text()
, "comments" : $(tr).find('td:eq(7)').text()
}
// console.log("table data is",TableData);
var abc = JSON.stringify(TableData)
// $("#aa").val(abc);
document.getElementById("aa").value = abc;
});
TableData.shift();
console.log("table data is a",TableData);
});
<div class="container">
<table id="tableDat1" class="table-hover table table-bordered table
table-striped">
<thead>
<tr>
<th>Product Name</th>
<th scope="col">Instance NAme</th>
<th scope="col">Steps</th>
<th scope="col">WorkAround</th>
<th scope="col">Resolution</th>
<th scope="col">Starting Impact Date</th>
<th scope="col">End Impact Date</th>
<th scope="col">Comments</th>
<!-- <th scope="col">Edit/Update</th> -->
</tr>
</thead>
<tbody id="tbd">
<c:forEach var="tableDatum" items="${list18}">
<tr> <td><textarea id="echoText" rows="8" cols="15"
class="tableBody"> <c:out value="${tableDatum.productName}"/></textarea>
</td>
this is a screen shot of created table for your reference
样本表HTML代码：-
<table class="table-hover ">
<thead>
<tr>
<th>Product Name</th>
<th scope="col">Instance NAme</th>
<th scope="col">Steps</th>
<th scope="col">WorkAround</th>
<th scope="col">Resolution</th>
<th scope="col">Starting Impact Date</th>
<th scope="col">End Impact Date</th>
<th scope="col">Comments</th>
<!-- <th scope="col">Edit/Update</th>-->
</tr>
</thead>
<tbody id="tbd" class="tbd1">
<tr>
<td>
<textarea id="echoText" rows="8" cols="15" class="tableBody">NOTE: In the case where the width attribute is set in more than one cell in the same column, the largest width is the one that is applied. Likewise, if the content in any table cell in that column (such as a graphic) outsizes a specified width, the width of the content will establish the width of the cell and the column it resides in.</textarea>
</td>
<td>
<textarea rows="8" cols="15" class="datTable">IBM2</textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
</tr>
<tr>
<td>
<textarea id="echoText" rows="8" cols="15" class="tableBody"></textarea>
</td>
<td>
<textarea rows="8" cols="15" class="datTable">IBM</textarea>
</td>
<td>
<textarea rows="8" cols="15">1</textarea>
</td>
<td>
<textarea rows="8" cols="15">Anna</textarea>
</td>
<td>
<textarea rows="8" cols="15">Debbie</textarea>
</td>
<td>
<textarea rows="8" cols="15">res</textarea>
</td>
<td>
<textarea rows="8" cols="15">sit</textarea>
</td>
<td>
<textarea rows="8" cols="15">eit</textarea>
</td>
</tr>
<tr>
<td>
<textarea id="echoText" rows="8" cols="15" class="tableBody"></textarea>
</td>
<td>
<textarea rows="8" cols="15" class="datTable">3,ROAR</textarea>
</td>
<td>
<textarea rows="8" cols="15">IBM</textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
我将要求将表id更改为class（因为jQuery无法识别多个相同的id），然后执行以下操作：-
$(document).find('.table-hover').on('keyup', 'textarea',function(){
var TableRecords = new Array();
var obj = $(this).closest('.table-hover');
obj.find('tbody tr').each(function(){
var datObj = {
"productName" : $(this).find('td:eq(0) textarea').val(),
"instance_name" : $(this).find('td:eq(1) textarea').val(),
"steps" : $(this).find('td:eq(2) textarea').val(),
"workAround" : $(this).find('td:eq(3) textarea').val(),
"resolution" : $(this).find('td:eq(4) textarea').val(),
"startingImpactDate" : $(this).find('td:eq(5) textarea').val(),
"endImpactDate" : $(this).find('td:eq(6) textarea').val(),
"comments" : $(this).find('td:eq(7) textarea').val(),
}
TableRecords.push(datObj);
});
console.log(TableRecords);
});
工作摘要：-
$(document).find('.table-hover').on('keyup', 'textarea',function(){
var TableRecords = new Array();
var obj = $(this).closest('.table-hover');
obj.find('tbody tr').each(function(){
var datObj = {
"productName" : $(this).find('td:eq(0) textarea').val(),
"instance_name" : $(this).find('td:eq(1) textarea').val(),
"steps" : $(this).find('td:eq(2) textarea').val(),
"workAround" : $(this).find('td:eq(3) textarea').val(),
"resolution" : $(this).find('td:eq(4) textarea').val(),
"startingImpactDate" : $(this).find('td:eq(5) textarea').val(),
"endImpactDate" : $(this).find('td:eq(6) textarea').val(),
"comments" : $(this).find('td:eq(7) textarea').val(),
}
TableRecords.push(datObj);
});
console.log(TableRecords);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-hover ">
<thead>
<tr>
<th>Product Name</th>
<th scope="col">Instance NAme</th>
<th scope="col">Steps</th>
<th scope="col">WorkAround</th>
<th scope="col">Resolution</th>
<th scope="col">Starting Impact Date</th>
<th scope="col">End Impact Date</th>
<th scope="col">Comments</th>
<!-- <th scope="col">Edit/Update</th>-->
</tr>
</thead>
<tbody id="tbd" class="tbd1">
<tr>
<td>
<textarea id="echoText" rows="8" cols="15" class="tableBody">NOTE: In the case where the width attribute is set in more than one cell in the same column, the largest width is the one that is applied. Likewise, if the content in any table cell in that column (such as a graphic) outsizes a specified width, the width of the content will establish the width of the cell and the column it resides in.</textarea>
</td>
<td>
<textarea rows="8" cols="15" class="datTable">IBM2</textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
</tr>
<tr>
<td>
<textarea id="echoText" rows="8" cols="15" class="tableBody"></textarea>
</td>
<td>
<textarea rows="8" cols="15" class="datTable">IBM</textarea>
</td>
<td>
<textarea rows="8" cols="15">1</textarea>
</td>
<td>
<textarea rows="8" cols="15">Anna</textarea>
</td>
<td>
<textarea rows="8" cols="15">Debbie</textarea>
</td>
<td>
<textarea rows="8" cols="15">res</textarea>
</td>
<td>
<textarea rows="8" cols="15">sit</textarea>
</td>
<td>
<textarea rows="8" cols="15">eit</textarea>
</td>
</tr>
<tr>
<td>
<textarea id="echoText" rows="8" cols="15" class="tableBody"></textarea>
</td>
<td>
<textarea rows="8" cols="15" class="datTable">3,ROAR</textarea>
</td>
<td>
<textarea rows="8" cols="15">IBM</textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
<td>
<textarea rows="8" cols="15"></textarea>
</td>
</tr>
</tbody>
</table>