用纯js写table表格

我可以回答你的问题。你可以使用JavaScript语言，通过DOM操作来创建和修改HTML表格。可以使用document.createElement()方法来创建表格元素，然后使用appendChild()方法将表格元素添加到文档中。使用document.createTextNode()方法创建表格中的文本内容，然后使用appendChild()方法将其添加到具体的表格单元格中。此外，你也可以使用innerHTML或outerHTML属性来修改或生成表格的HTML代码。希望我的回答能够帮到你。

相关问题

用纯 js 语言循环表格

可以使用以下代码实现循环表格：

<script>
  // 获取表格对象
  var table = document.getElementById("myTable");
  
  // 循环行
  for (var i = 0, row; row = table.rows[i]; i++) {
    // 在每一行中循环列
    for (var j = 0, col; col = row.cells[j]; j++) {
      // 对每个单元格进行操作
      col.innerHTML = "Cell " + i + "," + j;
    }  
  }
</script>

这段代码会将表格中每个单元格的内容改为其对应的行、列坐标。

js实现table表格拖拽排序

实现表格拖拽排序可以使用HTML5的Drag and Drop API，下面是一个使用纯JavaScript实现的示例代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Column 1</td>
      <td>Row 1, Column 2</td>
      <td>Row 1, Column 3</td>
    </tr>
    <tr>
      <td>Row 2, Column 1</td>
      <td>Row 2, Column 2</td>
      <td>Row 2, Column 3</td>
    </tr>
    <tr>
      <td>Row 3, Column 1</td>
      <td>Row 3, Column 2</td>
      <td>Row 3, Column 3</td>
    </tr>
  </tbody>
</table>

// 获取表格和表格行
var myTable = document.getElementById("myTable");
var rows = myTable.getElementsByTagName("tr");

// 遍历表格行，为每一行添加拖拽事件
for (var i = 0; i < rows.length; i++) {
  var row = rows[i];
  
  // 设置draggable属性为true
  row.draggable = true;
  
  // 添加dragstart事件
  row.addEventListener("dragstart", function(event) {
    // 设置拖拽的数据，这里使用了text/plain格式
    event.dataTransfer.setData("text/plain", event.target.innerHTML);
  });
  
  // 添加dragover事件
  row.addEventListener("dragover", function(event) {
    // 阻止默认的drop事件
    event.preventDefault();
    
    // 添加drop效果
    event.dataTransfer.dropEffect = "move";
  });
  
  // 添加drop事件
  row.addEventListener("drop", function(event) {
    // 阻止默认的drop事件
    event.preventDefault();
    
    // 获取拖拽的数据
    var data = event.dataTransfer.getData("text/plain");
    
    // 将数据插入到当前行之前
    this.parentNode.insertBefore(document.createElement("tr"), this).innerHTML = data;
    
    // 删除原来的行
    event.target.remove();
  });
}

在上面的代码中，我们首先获取了表格和表格行，然后遍历每一行，为每一行添加拖拽事件。在dragstart事件中，我们设置了拖拽的数据，这里使用了text/plain格式；在dragover事件中，我们阻止了默认的drop事件，并添加了drop效果；在drop事件中，我们获取了拖拽的数据，并将数据插入到当前行之前，然后删除原来的行。这样就实现了表格的拖拽排序。