js删除表格与添加表格列中带来的问题

目前有这样一个表格和一个添加行和删除行的操作

<ul class="c-listUnstyled clearfix p-postion_base">
                <li class="u-mt-content">
                    <a href="#" id="add_btn" name="add_btn" class="p-button_base p-button_type01 p-btn_top-right">加一行</a>
                </li>
            </ul>
            <div class="l-search__results p-postion_leftbtn">
                标题
                <table id="prize_list" name="prize_list" class="c-table_data_list c-table c-table_fixed u-text-center">
                    <tbody>
                    <tr>
                        <th class="u-text-center c-table_data_list--th u-percent15">第一列</th>
                        <th class="u-text-center c-table_data_list--th u-percent14">第二列</th>
                        <th class="u-text-center c-table_data_list--th">第三列</th>
                        <th class="u-text-center c-table_data_list--th">删除</th>
                    </tr>
                    <tr>
                        <td class="c-table_data_list--td u-text-middle">1</td>
                        <td class="c-table_data_list--td u-text-middle">
                            <input class="p-form__input u-w-max p-float_l" type="text" name="" value="">
                        </td>
                        <td class="c-table_data_list--td u-text-middle u-text-left">
                            <input class="p-form__input p-float_l" type="text" name="" value="">
                        </td>
                        <td class="c-table_data_list--td u-text-middle">
                            <a href="#" class="p-button_base--table p-button_type03 delete-row">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="c-table_data_list--td u-text-middle">2</td>
                        <td class="c-table_data_list--td u-text-middle">
                            <input class="p-form__input u-w-max p-float_l" type="text" name="" value="">
                        </td>
                        <td class="c-table_data_list--td u-text-middle u-text-left">
                            <input class="p-form__input p-float_l" type="text" name="" value="">
                        </td>
                        <td class="c-table_data_list--td u-text-middle">
                            <a href="#" class="p-button_base--table p-button_type03 delete-row">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="c-table_data_list--td u-text-middle">3</td>
                        <td class="c-table_data_list--td u-text-middle">
                            <input class="p-form__input u-w-max p-float_l" type="text" name="" value="">
                        </td>
                        <td class="c-table_data_list--td u-text-middle u-text-left">
                            <input class="p-form__input p-float_l" type="text" name="" value="">
                        </td>
                        <td class="c-table_data_list--td u-text-middle">
                            <a href="#" class="p-button_base--table p-button_type03 delete-row">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

tableContainer.addEventListener('click', function(event) {
  if (event.target.classList.contains('delete-row')) {
    event.preventDefault(); 

    var row = event.target.parentNode.parentNode;

    var rankColumn = row.querySelector('.c-table_data_list--td.u-text-middle');

    var currentRank = parseInt(rankColumn.textContent);

    row.parentNode.removeChild(row);

    var remainingRows = tableContainer.querySelectorAll('tr');
    for (var i = currentRank - 1; i < remainingRows.length; i++) {
      var rankCell = remainingRows[i].querySelector('.c-table_data_list--td.u-text-middle');
      rankCell.textContent = i + 1;
    }
  }
});
addButton.addEventListener('click', function(event) {
  event.preventDefault();

  var lastRankCell = tableContainer.querySelector('tr:last-child .c-table_data_list--td.u-text-middle');
  var lastRank = parseInt(lastRankCell.textContent);

  var newRow = createNewRow(lastRank + 1);

  table.appendChild(newRow);
});

function createNewRow(rank) {

  rankCell.textContent = rank;

  return newRow;
}

可能比较乱还请见谅，这样出现了一个问题，如果想保持第一列的序号排序一致的话，必须全部删除重新添加才可以，如果只是抽调当中几行在添加的话，排序会变得混乱

想询问一下这种情况有无解决的办法，谢谢

删除其中一行后其他行第一列的序号值还是保持从1开始递增，是这个意思吗？

<ul class="c-listUnstyled clearfix p-postion_base">
    <li class="u-mt-content">
        <a href="#" id="add_btn" name="add_btn" class="p-button_base p-button_type01 p-btn_top-right">加一行</a>
    </li>
</ul>
<div class="l-search__results p-postion_leftbtn">
    标题
    <table id="prize_list" name="prize_list" class="c-table_data_list c-table c-table_fixed u-text-center">
        <tbody>
            <tr>
                <th class="u-text-center c-table_data_list--th u-percent15">第一列</th>
                <th class="u-text-center c-table_data_list--th u-percent14">第二列</th>
                <th class="u-text-center c-table_data_list--th">第三列</th>
                <th class="u-text-center c-table_data_list--th">删除</th>
            </tr>
            <tr>
                <td class="c-table_data_list--td u-text-middle">1</td>
                <td class="c-table_data_list--td u-text-middle">
                    <input class="p-form__input u-w-max p-float_l" type="text" name="" value="">
                </td>
                <td class="c-table_data_list--td u-text-middle u-text-left">
                    <input class="p-form__input p-float_l" type="text" name="" value="">
                </td>
                <td class="c-table_data_list--td u-text-middle">
                    <a href="#" class="p-button_base--table p-button_type03 delete-row">删除</a>
                </td>
            </tr>
            <tr>
                <td class="c-table_data_list--td u-text-middle">2</td>
                <td class="c-table_data_list--td u-text-middle">
                    <input class="p-form__input u-w-max p-float_l" type="text" name="" value="">
                </td>
                <td class="c-table_data_list--td u-text-middle u-text-left">
                    <input class="p-form__input p-float_l" type="text" name="" value="">
                </td>
                <td class="c-table_data_list--td u-text-middle">
                    <a href="#" class="p-button_base--table p-button_type03 delete-row">删除</a>
                </td>
            </tr>
            <tr>
                <td class="c-table_data_list--td u-text-middle">3</td>
                <td class="c-table_data_list--td u-text-middle">
                    <input class="p-form__input u-w-max p-float_l" type="text" name="" value="">
                </td>
                <td class="c-table_data_list--td u-text-middle u-text-left">
                    <input class="p-form__input p-float_l" type="text" name="" value="">
                </td>
                <td class="c-table_data_list--td u-text-middle">
                    <a href="#" class="p-button_base--table p-button_type03 delete-row">删除</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    tableContainer = document.getElementById('prize_list')
    addButton = document.getElementById('add_btn')



    tableContainer.addEventListener('click', function (event) {
        if (event.target.classList.contains('delete-row')) {
            event.preventDefault();

            var row = event.target.parentNode.parentNode;
            row.parentNode.removeChild(row);

            for (var i = 1; i < tableContainer.rows.length; i++) {
                tableContainer.rows[i].cells[0].innerText=i
            }
        }
    });
    addButton.addEventListener('click', function (event) {
        event.preventDefault();
        var newRow = createNewRow();

        tableContainer.appendChild(newRow);
    });

    function createNewRow(rank) {
        var tr = document.createElement('tr');
        for (var i = 0; i < 4; i++) { var td = document.createElement('td'); tr.appendChild(td) }


        tr.cells[0].className = 'c-table_data_list--td u-text-middle'
        tr.cells[0].innerHTML = tableContainer.rows.length

        tr.cells[1].className = 'c-table_data_list--td u-text-middle'
        tr.cells[1].innerHTML = `<input class="p-form__input u-w-max p-float_l" type="text" name="" value="">`

        tr.cells[2].className = 'c-table_data_list--td u-text-middle u-text-left'
        tr.cells[2].innerHTML = `<input class="p-form__input p-float_l" type="text" name="" value="">`

        tr.cells[3].className = 'c-table_data_list--td u-text-middle'
        tr.cells[3].innerHTML = `<a href="#" class="p-button_base--table p-button_type03 delete-row">删除</a>`


        return tr;
    }

</script>

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/232973
我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：js在页面刷新或关闭之前对后台发送请求
除此之外, 这篇博客: JS的深浅复制，原来如此！中的 实现方式四：使用递归 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

想要实现深复制，且实现多层深复制则可以使用递归循环复制。

let obj = {
    a:1,
    b:2,
    c:{
        c1:10,
        c2:20
    }
}

const ReCopy = function (paramter) {
        let target = null;
        let isObject = paramter.constructor === Object;
        let isArray = paramter.constructor === Array;
        if (isObject || isArray) {
            target = Array.isArray(paramter) ? [] : {};
            for (let i in paramter) {
                target[i] = ReCopy(paramter[i]);
            }
        } else {
            target = paramter;
        }
        return target;
    }

let objA = ReCopy(obj);
objA.c.c1 = 'c1';

console.log(obj.c.c1);  // 10
console.log(objA.c.c1);  // 'c1'

您还可以看一下李广川老师的NW.JS 跨平台桌面客户端新手快速入门实战课程中的文件及文件夹操作一小节, 巩固相关知识点
以下回答由chatgpt基于相关博客总结生成:
解决在Javascript中删除表格和添加表格列时可能导致的序号排序混乱问题
针对这个问题，可以采取以下步骤来解决：
1. 为每个表格行添加一个唯一的标识符，例如id属性，可以使用数字、字符串或自动生成的唯一标识符。
2. 代码示例： ```javascript function addRow() { // 自动生成唯一标识符 var id = generateUniqueId();
  // 创建新的表格行 var newRow = document.createElement('tr'); newRow.id = id;
  // 添加其他表格列 // ...
  // 将新行添加到表格中 var table = document.getElementById('myTable'); table.appendChild(newRow); } ```
3. 在删除行时，使用标识符来查找并删除表格行，而不是按照位置删除。
4. 代码示例： javascript function deleteRow(rowId) { var row = document.getElementById(rowId); if (row) { row.parentNode.removeChild(row); } }
5. 更新表格中的序号列。可以在添加和删除行操作之后调用一个函数来重新设置序号。
6. 代码示例： javascript function resetRowNumbers() { var table = document.getElementById('myTable'); var rows = table.getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { var numberCell = rows[i].getElementsByTagName('td')[0]; numberCell.textContent = i + 1; } }
7. 在需要添加和删除行的地方调用相应的函数。
8. 代码示例： ```javascript function addOrDeleteRows() { // 添加行 addRow();
  // 删除行 deleteRow(rowId);
  // 重置序号 resetRowNumbers(); } ```
请注意，以上代码示例仅为演示，具体实现可能需要根据实际情况进行修改和适配。另外，生成唯一标识符的函数 generateUniqueId() 也需要自行实现，可以考虑使用时间戳、GUID等方式来生成唯一标识符。
希望以上解决方案能够帮助您解决问题。如果还有其他问题，欢迎继续提问。

js删除表格与添加表格列中带来的问题

解决在Javascript中删除表格和添加表格列时可能导致的序号排序混乱问题