如何用jQuery获取含用户输入值的表格行完整HTML代码？

嘿，这个问题我太懂了！其实分两种情况来处理，看你的表格行里有没有表单输入元素：

情况1：行里只有纯文本内容 #

如果你的表格行里没有input、select这类用户可编辑的表单元素，那直接用原生的outerHTML属性就能拿到包含当前内容的完整行HTML，简单得很：

// 假设目标行的ID是targetRow
var fullRowHtml = $('#targetRow')[0].outerHTML;
console.log(fullRowHtml);

这个方法会直接返回包含<tr>标签和所有单元格内容的完整HTML字符串，完全不需要额外处理。

情况2：行里包含表单输入元素（input/select/textarea等） #

这时候问题来了：用户输入的值是存在DOM元素的动态属性里（比如input的val()），而不是HTML源码的value属性中。直接用outerHTML拿到的还是页面加载时的初始HTML，不会包含用户输入的新值。

这时候我们需要先把动态值同步到元素的HTML属性中，再获取完整HTML。我给你写个通用的jQuery函数，能处理常见的表单元素：

function getRowWithUserInput(rowSelector) {
  // 先克隆目标行，避免修改原页面的DOM元素
  var $clonedRow = $(rowSelector).clone();

  // 同步input的当前值到value属性
  $clonedRow.find('input').each(function() {
    $(this).attr('value', $(this).val());
  });

  // 同步select的选中状态到selected属性
  $clonedRow.find('select').each(function() {
    var selectedVal = $(this).val();
    $(this).find('option').each(function() {
      if ($(this).val() === selectedVal) {
        $(this).attr('selected', 'selected');
      } else {
        $(this).removeAttr('selected');
      }
    });
  });

  // 同步textarea的内容到文本节点
  $clonedRow.find('textarea').each(function() {
    $(this).text($(this).val());
  });

  // 返回包含用户输入值的完整行HTML
  return $clonedRow[0].outerHTML;
}

// 使用示例：获取ID为targetRow的行的完整HTML（含用户输入）
var updatedRowHtml = getRowWithUserInput('#targetRow');
console.log(updatedRowHtml);

为什么这么做？ #

• 克隆行是为了不影响原页面的交互，毕竟我们只是要获取HTML副本，没必要修改用户正在操作的元素。
• 同步动态值到HTML属性后，outerHTML就能正确捕获到用户输入的内容，生成和当前页面显示一致的行HTML。

要不要手动构建行？ #

其实完全没必要手动拼接HTML字符串，上面的方法已经很通用了，而且比手动构建更不容易出错（比如避免引号转义、标签闭合这类问题）。除非你的行结构特别简单，否则优先用这种同步属性的方式。

内容的提问来源于stack exchange，提问作者Robin Andrews