js遍历<table>某列每个单元格

可以使用以下代码来遍历<table>某列每个单元格：

var table = document.getElementById("myTable");
for(var i = 0; i < table.rows.length; i++) {
  var cell = table.rows[i].cells[0]; // 0 表示第一列
  console.log(cell.innerHTML);
}

这段代码会输出<table>中第一列每个单元格的内容。

相关问题

<table> <tr> <td class="action-buttons"> <button onclick="exportAsImage()">导出为图片</button> </td> </tr> <tr> <th>序号</th> <th>课程代码</th> <th>课程名称</th> <th>授课教师</th> <th>教师账号</th> <th>审批结果</th> <th>操作</th> </tr> <c:forEach items="${list3}" var="apply" varStatus="status"> <tr> <td>${status.index + 1}</td> <td>${apply.coursecode}</td> <td>${apply.coursename}</td> <td>${apply.tname}</td> <td>${apply.tid}</td> <td>${apply.result}</td> <td class="action-buttons"> <button class="button" onclick="check('${apply.aid}')">查看</button> </td> </tr> </c:forEach> </table>分析一下这段代码

这段代码是一个HTML表格的代码，包含了表头和通过JSTL的<c:forEach>标签来循环生成表格行。

在这个表格中，使用了一些CSS类来设置样式。例如，class="action-buttons"用于设置一个单元格的样式，class="button"用于设置一个按钮的样式。

表格的结构如下：

- 第一个<tr>标签包含了一个<td>单元格，用于放置一个按钮。当按钮被点击时，会调用JavaScript函数exportAsImage()。
- 第二个<tr>标签是表头行，包含了多个<th>单元格，用于显示表格的列标题。
- 使用<c:forEach>标签来循环生成表格的数据行。它遍历了名为"list3"的数据列表，并将当前元素存储在名为"apply"的变量中。同时，使用varStatus属性定义了一个名为"status"的循环状态变量，可以使用它来获取当前循环的索引等信息。
- 在<c:forEach>标签内部，使用<tr>标签来生成表格的数据行。每一行包含了多个<td>单元格，用于显示具体的数据。其中，使用${}语法来引用变量的值，例如${status.index + 1}表示当前循环的索引加1。
- 最后一个<td>单元格中有一个按钮，当按钮被点击时，会调用JavaScript函数check()并传递参数'${apply.aid}'。

这个表格是动态生成的，数据来源于名为"list3"的数据列表。通过循环生成表格行，每一行显示了一个申请的相关信息，并在最后一列包含了一个按钮，用于执行特定操作。

<legend class="field_title"> <a href="#" class="easyui-linkbutton" plain="true" onclick="addTableRow()"><i class="fa fa-plus-circle fa-lg fa-fw fa-col"></i>增加行</a> </legend> <table style="width: 100%;"> <thead > <tr> <th>操作</th> <th>提单号/运单号</th> <th>一程日期</th> <th>二程日期</th> <th>预计到货日期</th> <th>海船公司</th> <th>放箱日期</th> <th>放箱单上传</th> </tr> <tr> <td><input type="button" name="comment" value="删除"></td> <td><input type="text" name="comment"></td> <td><input type="date" name="date1"></td> <td><input type="date" name="date2"></td> <td><input type="date" name="date3"></td> <td><input type="text" name="commen1t"></td> <td><input type="date" name="date4"></td> <td><input type="file" name="attachment"></td> </tr> </thead> </table>新增和删除

在上述代码中，使用了一个`<table>`元素来呈现表格，并在表格的第一行添加了一个`<legend>`元素作为标题。在第一行的标题中，使用了一个`<a>`元素来实现“增加行”功能，并为它添加了一个`onclick`事件，当用户点击时会调用JavaScript中的`addTableRow()`函数。

在表格的第二行开始，使用`<thead>`元素来定义表格的表头，其中包括每个列的标题。在每个单元格中，使用`<input>`元素来呈现表格中的数据，并根据需要设置不同的`type`属性（如`text`, `date`, `file`等）。

在每一行的第一列中，使用了一个“删除”按钮，当用户点击该按钮时会调用JavaScript中的删除函数，从而实现删除该行的操作。

JavaScript代码示例（增加行和删除行）：

// 增加行
function addTableRow() {
  var table = document.querySelector('table');
  var newRow = table.insertRow(-1);
  var cells = ['操作', '提单号/运单号', '一程日期', '二程日期', '预计到货日期', '海船公司', '放箱日期', '放箱单上传'];
  for (var i = 0; i < cells.length; i++) {
    var cell = newRow.insertCell(i);
    if (i === 0) {
      cell.innerHTML = '<input type="button" name="comment" value="删除" onclick="deleteTableRow(this)">';
    } else {
      cell.innerHTML = '<input type="text" name="comment">';
    }
  }
}

// 删除行
function deleteTableRow(button) {
  var row = button.parentNode.parentNode;
  row.parentNode.removeChild(row);
}

在`addTableRow()`函数中，首先找到表格元素，然后使用`insertRow()`方法在表格的末尾插入一行。接着，循环遍历每个单元格，并使用`insertCell()`方法将单元格插入到新行中，根据需要设置不同的内容和属性。在第一列中，使用`<input>`元素创建一个“删除”按钮，并为它添加一个`onclick`事件，当用户点击时会调用`deleteTableRow()`函数。最后，在`deleteTableRow()`函数中，找到要删除的行，并使用`removeChild()`方法将其从表格中删除。