动态生成表格并修改ID数据（原生）


<table cellspacing="0px" bgcolor="#ffc0cb" border="1px" >
                <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

            <script>

                var arr = [{
                    id:'001',
                    name: '小贵',
                    age: 18,

                },
                    {
                        id:'002',
                        name: '吉吉',
                        age: 28,

                    },
                    {
                        id:'003',
                        name: '有刺客',
                        age: 16,

                    }
                ]
                tbody = document.querySelector('tbody');
                for (var i=0; i<arr.length; i++){
                    var tr = document.createElement('tr');
                    tbody.appendChild(tr);
                    for (var k in arr[i]) {
                        var td = document.createElement('td');
                        tr.appendChild(td);
                        td.innerHTML = arr[i][k];
                        console.log(arr[i]['id']);
      
                       
                    }
                    var td = document.createElement('td');
                    td.innerHTML=  '<a href="javascript:;">删除</a>';
                    tr.appendChild(td);

                }
                var a=document.querySelectorAll('a');
                for(var i=0;i<a.length;i++){          
                    a[i].addEventListener('click',function(){
                        tbody.removeChild(this.parentNode.parentNode);       
                    })
                }


            </script>
根据对象中的数据动态生成表格（js原生）
需要解决的问题：
                            在插入数据后，生成对应的行与列后，需要同时修改每行的对象中的ID元素的数据：arr[i]['id']，id从1开始

要解决这个问题，你可以在生成每一行的同时修改每行对象中的ID元素的数据。在你的代码中，可以在创建tr元素后添加以下代码：

for (var k in arr[i]) {
    var td = document.createElement('td');
    tr.appendChild(td);
    if (k === 'id') {
        arr[i][k] = i + 1; // 修改ID元素的数据为i+1
        td.innerHTML = arr[i][k];
    } else {
        td.innerHTML = arr[i][k];
    }

这样，每次生成新的行时，都会将对应的ID元素的数据修改为正确的值（从1开始递增）。完整的代码如下：

html
<table cellspacing="0px" bgcolor="#ffc0cb" border1px">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>

tbody>
</table>

<script>
var arr = [{
id: '001',
name: '小贵',
age: 18,

    },
    {
        id: '002',
        name: '吉吉',
        age: 28,

    },
    {
        id: '003',
        name: '有刺客',
        age: 16,

    }
]
tbody = document.querySelector('tbody');
for (var i = 0; i < arr.length; i {
var tr = document.createElement('tr');
tbody.appendChild(tr);
for (var k in arr[i]) {
var td = document.createElement('td');
tr.appendChild(td);
if (k === 'id') {
arr[i][k] = i + 1; 修改ID元素的数据为i+1
td.innerHTML = arr[i][k];
} else {
td.innerHTML = arr[i][k];
}
}
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(td);

}
var a = document.querySelectorAll('a');
for (var i = 0; i < a.length; i {
    a[i].addEventListener('click', function () {
        tbody.removeChild(this.parentNode.parentNode);
    })
}
</script>

你可以看下这个问题的回答https://ask.csdn.net/questions/935248
你也可以参考下这篇文章：路由跳转地址中只携带id值的跳转方式
除此之外, 这篇博客: 前端基本知识介绍中的 根据ID获取 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

使用方法 getElementById() 可以获取带有ID的元素对象。

（https://developer.mozilla.org/zh-CN/ 查看详细说明⽂档）

需求：通过 JS 获取 id 为 index 的标签；

<body>
    <div id="index">hello world</div>
</body>

实现：

<body>
    <div id="index">hello world</div>
    <script>
        var variable = document.getElementById("index");
        console.log(variable);
        console.log(typeof variable);
        console.dir(variable);
    </script>
</body>

注意：<script>js代码</script> 需写在元素标签下面。

您还可以看一下黄菊华老师的微信小程序样式开发入门课程中的 ID选择器小节, 巩固相关知识点
以下回答由chatgpt基于相关博客总结生成:
回答：
为了动态生成表格，我们可以使用原生JavaScript的DOM操作来创建table和table的各个元素。具体的实现步骤如下：
1. 创建一个HTML页面，添加一个div元素用于容纳生成的表格： ```html
```
1. 在JavaScript中获取到这个div元素，并创建table元素并将其添加到div中： ```javascript // 获取div元素 var tableContainer = document.getElementById('tableContainer');
// 创建table元素 var table = document.createElement('table');
// 将table元素添加到div中 tableContainer.appendChild(table); ```
1. 获取到要修改的ID数据，并根据数据的长度来确定需要生成的行数和列数： ```javascript // 假设要修改的ID数据为一个二维数组 var idData = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ];
var rowCount = idData.length; var colCount = idData[0].length; ```
1. 使用两个嵌套的循环来生成table的行和列，并将ID数据添加到对应的单元格中： ```javascript for (var i = 0; i < rowCount; i++) { // 创建行 var row = document.createElement('tr');
  for (var j = 0; j < colCount; j++) { // 创建列 var cell = document.createElement('td');
  // 将ID数据添加到单元格中 cell.textContent = idData[i][j];
  // 将单元格添加到行中 row.appendChild(cell); }
  // 将行添加到表格中 table.appendChild(row); } ```
这样，通过以上步骤，我们就可以动态生成一个带有ID数据的表格了。请注意，以上代码只是示例，如果要根据具体业务需求进行定制化的生成表格，可能需要进一步的调整代码。
至于修改ID数据的问题，根据参考资料段落2给出的递归方法，可以通过一个递归函数来进行ID数据的修改。具体的实现方法如下：
1. 定义一个递归函数，命名为updateId，该函数接受一个数据对象和要修改的ID作为参数：
```
function updateId(data, id) {
  if (data.id === id) {
    // 找到匹配的ID，进行修改
    data.id = generateNewId();
  } else if (data.goods && data.goods.length !== 0) {
    // 递归遍历内层对象
    for (var i = 0; i < data.goods.length; i++) {
      updateId(data.goods[i], id);
    }
  }
}
```
1. 定义一个生成新ID的函数，命名为generateNewId，该函数可以根据具体业务需求来生成新的ID值，比如可以使用当前日期和随机数等：
```
function generateNewId() {
  var currentDate = new Date().toISOString().replace(/[-:.]/g, "");
  var randomNum = Math.floor(Math.random() * 1000);
  return currentDate + randomNum;
}
```
1. 调用递归函数来进行ID数据的修改：
```
// 假设要修改的ID为11
updateId(date, 11);

// 打印修改后的数据
console.log(date);
```
以上代码是基于参考资料段落2提供的数据结构和递归方法进行修改的示例，如果在实际应用中数据结构和递归逻辑有所不同，可能需要进行相应的调整。
希望以上解答能够帮助你理解如何使用原生JavaScript动态生成表格并修改ID数据。