2

我通过克隆行动态地将行添加到表中。一个单元格有一个输入元素。克隆行时，输入元素的 ID 值更改为唯一，但所有输入都具有相同的类。我有一个单击函数分配给分配给打开 jQuery 模态对话框（）的输入元素的类。dialog() 有一个文本区域，用户可以在其中输入评论。
当用户在对话框（）中单击“接受”时，我希望将对话框的 textarea 元素的值写入被单击的输入元素的值。

这仅在单击第一个原始输入元素时有效。添加行并单击输入元素会打开 dialog() 但输入元素不会更新。

确实会发生一种奇怪的行为...... 使用“添加行”按钮添加行后，如果更改原始行的输入元素，所有输入元素都会更改为该文本。（注意：我没有包含日期​​选择器代码）

它必须与 IE7 兼容。（我知道它是旧的！）

我正在使用以下 jquery 脚本：（jquery-1.8.2.js）和（jquery-ui-1.9.1.custom.min.js）

这里是简化的 HTML：

<form id="frmTask">
<div id="popupDialog" title="Enter your comments for this IDPM Task here.">
    <p>
<div>characters left: <span id="txt-length-left"></span></div>
<textarea cols="50" rows="30" name="CommentsDialog" id="CommentsDialog" class="txtComments"></textarea>
</p>
</div>
<table style="" id="tblInput" border="0" name="tblInput" cellspacing="0" cellpadding="0" width="600" summary="Formatting table for output display">
<thead>
<tr>
<th scope="col"><div width="24px">&nbsp;</div></th>
<th scope="col">Suspense Date</th>
<th scope="col">Comments</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tdTop">&nbsp;</td>
<td class="tdTop"><input name="SuspenseDate1" id="SuspenseDate1" value="" class="DatePick" /></td>
<td class="tdTop"><input cols="25" rows="1" name="Comments1" id="Comments1" class="popComments"></input></td>
</tr>
</tbody>
</table>
<button id="AddNew">Add Row</button>
</form>

这是代码：

 // Copy/Clone the last row and append it to the TABLE ID referenced in the function call
    $("#AddNew").click(function() {
    addTableRow("#tblInput");
    }); 

    function addTableRow(table) {
                                                //$('input.DatePick').removeClass('hasDatepicker').datepicker();
    var tbody = $(table + ' tbody');
    var rows = tbody.find('tr').length;
    var newRow = tbody.find('tr:first').clone(true).appendTo(tbody);
    newRow.find(':input').val('').each(function() {
    var id = this.id
    if (id) {
    this.id = this.id.split('_')[0] + '_' + rows;
    }
    }).end().find('.DatePick').removeClass('hasDatepicker').datepicker();
    // set variable to the last row in the table    
    newRow = $(table + ' tr:last');
    // Remove the delete icon from the previous row before creating the new row.
    $('a.remove').remove();
    // insert a remove link in the last cell
    $('td:first-child', newRow).html('<a href="" class="remove" alt="Delete This Row" title="Delete This Row"><img src="/images/Delete_Icon_48x48.jpg" height="24px" width="24px" border="0"><\/a>');
    var addRow = $(this).parent().parent();
    return true;
    }

这是模态对话框代码：

    var inputID;
    $('.popComments').on('click', function(event) {
    inputID = event.target.id;
    alert(event.target.id + ' <- event.target.id : inputID -> ' + inputID);          
    $("#popupDialog").data("id", inputID);
    var $stuff = "Comments1";
    $('#popupDialog').dialog('open');
    $('textarea.txtComments').text("");
    });          
    // This is the popUp dialog for entering user Comments
    $("#popupDialog").dialog({
    modal: true,
    autoOpen: false,
    width:"600",
    position:{ my: "top", at: "top", of: "#Comments1" },
    buttons: {
    'Cancel': function() {
    $(this).dialog('close');
    },
    'Accept': function() {
    var helpMe  = $("#popupDialog").data("id");
    var txtComments = $(this).find('textarea.txtComments').val();
    $('#frmTask input#' + helpMe).val(txtComments);
    $(this).dialog('close');
    }
    }
    });
4

1 回答 1

0

Manic，我认为你在这里跳过了一些不必要的箍。

  • 避免使用 id - 在复制表行时它们通常是不必要的，即使涉及复杂的事件处理也是如此。
  • 在您的原始原型行中硬编码一个删除按钮并display:none在您的样式表中设置它的样式。

然后，javascript将简化如下：

$("#AddNew").on('click', function() {
    var tbody = $('#tblInput tbody');
    var newRow = tbody.find('tr').eq(0).clone(true).appendTo(tbody);
    newRow.find('input').val('').end().find('.DatePick').removeClass('hasDatepicker').datepicker();
    tbody.find('a.remove').hide().filter(":last").show();
});

您需要修改对话代码以在没有输入 ID 的情况下工作，但这应该不是问题。您只需要在打开对话框时保留对 javascript 中“活动”输入元素的引用，以便将文本放回正确的位置。这实际上比记住一个 id 然后使用它来重新发现 DOM 中的正确输入元素（这可能是您当前所做的）更简单、更经济。

如果您仍然对对话框等有疑问，请编辑您的问题以包含代码，我会看看它。

编辑：

下面是一些处理注释的代码，避免了输入字段 id 的需要：

var $$ = {}; //cache of reusable jQuery objects
$$.popComments = $('.popComments');
$$.popupDialog = $('#popupDialog');
$$.popupComments = $popupDialog.find('textarea.txtComments');
$$.activeInput = null;

$$.popComments.on('click', function() {
    $$.activeInput = $(this);
    $$.popupComments.empty();
    $$.popupDialog.dialog('open');
});
// This is the popUp dialog for entering user Comments
$$.popupDialog.dialog({
    modal: true,
    autoOpen: false,
    width: "600",
    position:{ my: "top", at: "top", of: "#Comments1" },
    buttons: {
        'Cancel': function() {
            $(this).dialog('close');
        },
        'Accept': function() {
            $$.activeInput.val( $$.popupComments.val() );
            $(this).dialog('close');
        }
    }
});

笔记：

  • 未经测试。
  • 每次需要处理 DOM 中的元素时，不重新发现它们对处理能力来说是经济的。缓存在这里有所帮助，并通过充当其自己的内部命名空间来$$避免阻塞主命名空间。$.function(){...}
  • 大概对话框已经在工作，所以我没有检查.dialog()选项（除了“接受”功能）。
于 2012-11-26T00:27:51.493 回答