Question

我有一个带有向上/向下箭头的表单构建器来交换位置。一切正常，但在切换时不会保留在textarea或输入字段中输入的任何新输入。

以下是向上交换对象的代码

$("a.move-up").live('click', function() {
      var xvalue = $(this).attr("xvalue");
      var this_row =  $("tr#row-" + xvalue).html();
      this_row = "<tr id='row-" + xvalue + "'>" + this_row + "</tr>";


      var position = $("table#input-table tr").index($('tr#row-' + xvalue));
      position++;

      var prev_position = position - 1;

      $("#input-table tr:nth-child(" + position + ")").remove();
      $(this_row).insertBefore("#input-table tr:nth-child(" + prev_position + ")");

      //alert(this_row);


      return false;

   });

Answer 1

您真正需要做的就是将整行作为jQuery对象移动，而无需在html字符串中重构它。使用jQuery时，重要的是要理解$(selector)对象包含的完整DOM元素具有比构成它的html更多的属性

$("a.move-up").live('click', function() {
    var xvalue = $(this).attr("xvalue");
    var this_row = $("tr#row-" + xvalue)
    var prev_row = this_row.prev();
    this_row.inserBefore(prev_row);

    return false;

});

如果move-up按钮在行内，您可以使用简单的遍历来识别当前行并简化代码

$("a.move-up").live('click', function() {

    var this_row = $(this).closest('tr')
    var prev_row = this_row.prev();
    this_row.inserBefore(prev_row);

    return false;

});

Answer 2

您错过了这些值，因为它们不是html（）方法返回的HTML代码的一部分。您必须手动重写这些值。尝试将函数的beginnig更改为：

var this_row =  $("tr#row-" + xvalue);
var new_row = "<tr id='row-" + xvalue + "'>" + this_row.html() + "</tr>";
this_row.find("input[type=text], textarea").each(function(index){
    $(new_row.find("input[type=text], textarea")[index]).val( $(this).val() );
});
this_row = new_row;

使用jquery交换输入元素，而不是保留值

2 个答案: