如何访问html单元格对象(获取和设置单元格值)

时间:2019-05-10 00:11:44

标签: html object cell access

我已经建立了一个包含16行的html表,并且所有单元格都填充有示例数据。我正在尝试通过jQuery onclick事件将表单元作为对象访问,但是没有成功。

我已经查看了StackOverflow上所有可能的答案,但其中一些对我有用。

$("th #trash").click(function(event) {
   var tableRow = $('#tblStOrders').find('tbody').find('tr');

   //This displays 16, which is correct
   console.log(tableRow.length);

   //This loop shows the i index correctly but cell values display as undefined.

   for (var i = 0; i < tableRow.length; i++) {
     var cellValue = $(tableRow[i]).find('td:eq(0)').html();
     console.log(i, cellValue);
   }
   event.stopPropagation();
});

1 个答案:

答案 0 :(得分:0)

您的代码似乎运行良好。如下所示,它确实返回所有16个单元格值。

var tableRow = $('#tblStOrders').find('tbody').find('tr');

   //This displays 16, which is correct
   console.log(tableRow.length);

   //This loop shows the i index correctly but cell values display as undefined.

   for (var i = 0; i < tableRow.length; i++) {
     var cellValue = $(tableRow[i]).find('td:eq(0)').html();
     console.log(i, cellValue);
   }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblStOrders">
    <tbody>
    <tr><td>1</td><td></td></tr>
    <tr><td>2</td><td></td></tr>
    <tr><td>3</td><td></td></tr>
    <tr><td>4</td><td></td></tr>
    <tr><td>5</td><td></td></tr>
    <tr><td>6</td><td></td></tr>
    <tr><td>7</td><td></td></tr>
    <tr><td>8</td><td></td></tr>
    <tr><td>9</td><td></td></tr>
    <tr><td>10</td><td></td></tr>
    <tr><td>11</td><td></td></tr>
    <tr><td>12</td><td></td></tr>
    <tr><td>13</td><td></td></tr>
    <tr><td>14</td><td></td></tr>
    <tr><td>15</td><td></td></tr>
    <tr><td>16</td><td></td></tr>
    </tbody>
    </table>

我能想到的代码返回未定义的唯一原因是,由于某些原因,您的行缺少了<td></td>个单元格?您是否在动态生成表?