如何从含多类型单元格的HTML表格提取数据并修复编辑异常

问题1：displayTableData()无响应+无法获取select下拉框值 #

1. displayTableData()报错原因：函数中直接给values[r][c]赋值时，values[r]未初始化，导致Cannot set properties of undefined错误，函数执行中断。
2. 无法获取select值的原因：点击添加确认时，仅替换了输入框的内容，未处理select下拉框，td中保留的是select元素的HTML代码而非选中值，后续用innerHTML获取的是代码而非实际值。

修复步骤：

• 为每行初始化数组后再赋值
• 在添加确认逻辑中，同步处理select下拉框的选中值替换

问题2：编辑时select下拉框丢失 #

编辑按钮点击时，所有非操作列都被替换为文本输入框，未保留原有的select类型。需要在编辑逻辑中判断列类型，为Taxation列重新生成select下拉框并设置选中值。

修改后的完整JavaScript代码 #

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();

// Append table with add row form on add new button click
$(".add-new-your-super-contribution").click(function(){
  $(this).attr("disabled", "disabled");
  var index = $("table tbody tr:last-child").index();
      var row = '<tr>' +
          '<td label="Age" class="center"><input type="text" class="form-control" name="age" id="age"></td>' +
          '<td label="Contribution" class="align-right"><input type="text" class="form-control" name="contribution" id="contribution"></td>' +
          '<td label="Taxation">' +
            '<select class="form-control your-super-contribution">' +
              '<option value="Before">Before</option>' +
             '<option value="After">After</option>' +
            '</select>' +
          '</td>' +
          '<td label="Actions" class="center"><a class="add-your-super-contribution" title="Add" data-toggle="tooltip"><i class="material-icons">&#xE03B;</i></a>' +
          '<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>' +
          '<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a></td>' +
      '</tr>';
    $("table").append(row);     
    $("table tbody tr").eq(index + 1).find(".add-your-super-contribution, .edit").toggle();
    $('[data-toggle="tooltip"]').tooltip();
  });

    // Add row on add button click
    $(document).on("click", ".add-your-super-contribution", function(){
        var empty = false;
        var $row = $(this).parents("tr");
        var input = $row.find('input[type="text"]');
        var select = $row.find('select.your-super-contribution');

        // 验证输入框
        input.each(function(){
            if(!$(this).val()){
                $(this).addClass("error");
                empty = true;
            } else{
                $(this).removeClass("error");
            }
        });

        $row.find(".error").first().focus();
        if(!empty){
            // 替换input值到td
            input.each(function(){
                $(this).parent("td").html($(this).val());
            }); 
            // 替换select选中值到td
            var selectedVal = select.val();
            select.parent("td").html(selectedVal);
            
            $(this).parents("tr").find(".add-your-super-contribution, .edit").toggle();
            $(".add-new-your-super-contribution").removeAttr("disabled");
            displayTableData();
        }       
    });

    // Edit row on edit button click
    $(document).on("click", ".edit", function(){
        var $row = $(this).parents("tr");
        $row.find("td:not(:last-child)").each(function(index){
            var $td = $(this);
            var text = $td.text();
            // 判断是否为Taxation列（第三列，index=2）
            if(index === 2){
                // 生成select下拉框并设置选中值
                var selectHtml = '<select class="form-control your-super-contribution">' +
                                    '<option value="Before" ' + (text === "Before" ? "selected" : "") + '>Before</option>' +
                                    '<option value="After" ' + (text === "After" ? "selected" : "") + '>After</option>' +
                                  '</select>';
                $td.html(selectHtml);
            } else {
                // 其他列生成文本输入框
                $td.html('<input type="text" class="form-control" value="' + text + '">');
            }
        });     
        $row.find(".add-your-super-contribution, .edit").toggle();
        $(".add-new-your-super-contribution").attr("disabled", "disabled");
    });

    // Delete row on delete button click
    $(document).on("click", ".delete", function(){
        $(this).tooltip('hide');
        $(this).parents("tr").remove();
        $(".add-new-your-super-contribution").removeAttr("disabled");
    });
});

function deleteAllYourSuperContribution() {
  $("#your-super-contribution-table > tbody").empty(); // 修正ID拼写错误
}

function displayTableData() {
  var tableBody = document.getElementById("your-super-contribution-table").getElementsByTagName('tbody')[0];
  var values = [];

  for (var r = 0, n = tableBody.rows.length; r < n; r++) {
    values[r] = []; // 初始化每行的数组
    for (var c = 0, m = tableBody.rows[r].cells.length; c < m; c++) {
      var cell = tableBody.rows[r].cells[c];
      values[r][c] = cell.textContent.trim(); // 用textContent获取纯文本内容
      console.log("values " + r + " " + c + " " + values[r][c]);
    }
  }
}

额外修复细节 #

• 修正deleteAllYourSuperContribution中的表格ID拼写错误
• 将select的ID改为class，避免重复ID导致的DOM问题
• 用textContent替代innerHTML获取表格内容，避免HTML代码干扰
• 优化编辑逻辑，针对不同列生成对应类型的编辑控件

内容的提问来源于stack exchange，提问作者Lorna from Perth