jQuery 用于动态添加/删除行功能，它的 clone() 对象不能修改元素名称答案

【问题标题】：jQuery for dynamic Add/Remove row function, it's clone() object cannot modify element namejQuery 用于动态添加/删除行功能，它的 clone() 对象不能修改元素名称
【发布时间】：2010-06-07 15:59:59
【问题描述】：

我正在尝试使用 jQuery 添加动态添加/删除行功能，但我在 IE8 中遇到了一些问题，它的 clone() 对象无法修改元素名称并且无法使用 javascript 表单 (prhIndexed[i].prhSrc)。功能键。

在 FireFox 中运行良好，源代码作为附件，请帮我一个忙，帮我解决问题。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

var _table = jQuery("#prh");    
var _tableBody = jQuery("tbody",_table);    

var _addRowBtn = jQuery("#controls #addRow");

var _addRowsNumber= jQuery("#controls #add_rows_number");   

var blankRowID = "blankRow";

_addRowBtn.click(function(){                
    var newRow = jQuery("#"+blankRowID).clone(true)
                    .appendTo(_tableBody)
                    .attr("style", "display: ''")
                    .addClass("rowData")                                                    
                    .removeAttr("id");                  
     }
         refreshTable(_table);          
}
return false; 
});

function refreshTable(_table){

    var tableId = _table.attr('id');        
    var count =1; // ignore hidden column


    jQuery ( "#"+tableId ).find(".rowData").each(function(){

        jQuery(this).attr('id', tableId + "_" + count );//// update tr rowid
        count ++;           
    });     

    count =0;       
    jQuery ( "#"+tableId ).find("input[type='checkbox'][name^='"+tableId+"']").not(".checkBoxAll").each(function(){

        jQuery(this).attr('id', tableId + "_ckbox" + count );
        jQuery(this).attr('name', tableId + "_" + count ); // IE8 cannot modify name ??

        count ++;           
    });
 };  
});
</script>

HTML

<body>
   <form >

<div id="controls">
    <table  width="350px" border="0">
        <tr><td>
            <input id="addRow"  type="button" name="addRows" value="Add Row" />                                     
            <input id="add_rows_number" type="text" name="add_rows_number" value="1" style="width:20px;" maxlength="2" />
            <input id="insertRow" type="button" name="insert" value="Insert Row" />
            <input id="removeRow" type="button" name="deleteRows" value="Delete Row" /> 
        </td></tr>
</table></div>

<table id="prh" width="350px" border="1">
    <thead>
        <tr class="listheader">
        <td nowrap width="21"><input type="checkbox" name="prh_" class="checkBoxAll"/></td>
        <td nowrap width="32">Sequence</td>
        <td nowrap width="153" align="center">Channel</td>
        <td nowrap width="200">Source</td>
        </tr>
    </thead>

    <tbody> 
        <!-- dummy row -->      
        <tr id='blankRow' style="display:none" >                
            <td><input type="checkbox" id='prh_ckbox0' name='prh_0' value=""/></td>
            <td align="right"><input type="text" name="prhIndexed[0].prhSeq" maxlength="10" value="" onkeydown="" onblur="" onfocus="" readonly="readonly" style="width:30px;background-color:transparent;border:0;line-height:13pt;color: #993300;background-color:transparent;border:0;line-height:13pt;color: #993300;"></td>                
            <td><select name="prhIndexed[0].prhChannelproperty"><option value=""></option>
                <option value="A01">A01</option>
                <option value="A02">A02</option>
                <option value="A03">A03</option>
                <option value="A04">A04</option>
                </select></td>
            <td><input type="text" name="prhIndexed[0].prhSrc" maxlength="6" value="new"  style="width:80px;background-color:#FFFFD7;">
                <div id='displayPrhSrcName0'></div>
                </td>                                           
        </tr>
        <!-- row data -->   
        <tr id='prh_1' class="rowData">
            <td><input type="checkbox" id='prh_ckbox1' name='prh_1' value=""/></td>
            <td align="right"><input type="text" name="prhIndexed[1].prhSeq" maxlength="10" value="1" onkeydown="" onblur="" onfocus="" readonly="readonly" style="width:30px;background-color:transparent;border:0;line-height:13pt;color: #993300;background-color:transparent;border:0;line-height:13pt;color: #993300;"></td>               
            <td><select name="prhIndexed[1].prhChannelproperty"><option value=""></option>
                <option value="A01">A01</option>
                <option value="A02">A02</option>
                <option value="A03">A03</option>
                <option value="A04">A04</option>
                </select></td>
            <td><input type="text" name="prhIndexed[1].prhSrc" maxlength="6" value="new"  style="width:80px;background-color:#FFFFD7;">
                <div id='displayPrhSrcName0'></div>
                </td>                                                   
        </tr>


    </tbody>
</table>

</form >
</body>

【问题讨论】：

也许您可以通过一个隔离特定问题的测试示例来缩小范围。
ID 更新了吗？您确定 each() 循环正在遍历您想要的元素吗？

标签： jquery dynamic clone row

【解决方案1】：

我真的建议提出具体、简短和明确的问题。没有多少人愿意翻阅您的所有代码和标记来为您找到错误。

我刚刚注意到一件事，可能和你的问题有关：

var newRow = jQuery("#"+blankRowID).clone(true).appendTo(_tableBody)    
    .attr("style", "display: ''")
    .addClass("rowData")                                                    
    .removeAttr("id");

这里有几件事：

用.attr() 修改样式不是一个好主意。使用 jQuerys .css() 函数。

像您一样将display 设置为空字符串也不是一个好主意。做：

.css('display', 'none') // to hide
.css('display', 'block') // to show

或本地

$('element').hide(); // to hide
$('element').show(); // to show

所以基本上这个调用应该是这样的：

var newRow = jQuery("#"+blankRowID).clone(true).appendTo(_tableBody)    
    .css("display", "block")
    .addClass("rowData")                                                    
    .removeAttr("id");

【讨论】：

谢谢你的推荐，下次我会小心的
+1 纯粹的奉献精神！ ;o) 虽然我想知道是否通过尝试将 display 设置为空字符串，OP 是否试图实际显示该元素？看起来被克隆的 blankRow 在内联样式属性中以 display:none 开头。
修复了：p.. 如果不是那部分不会随机落入我的视野，我真的不会回答。
代码很难闻，但我的问题是标题，它不能修改元素名称，有些磨损？请帮助我
name 是什么意思。属性？尝试使用.attr('name', 'new name');

【解决方案2】：

在上一篇文章中，我正在重新绘制我的表格，问题解决了！！

        // update tr rowid
    jQuery ( "#"+tableId ).find(".rowData").each(function(){

        var rowHtml="<tr id='prh_"+count+"'class='refreshData'>"; // another class          

        var myRow = jQuery(this);

        jQuery('td', myRow).each(function(){
            rowHtml += "<td>";  

            var myTd = jQuery(this);

            jQuery ( myTd ).find("input[type='checkbox']").each(function(){

                var oldCkbox = jQuery(this);
                var ckboxName = oldCkbox.attr('name', 'prh_'+ count ).attr('name');

                var newCkbox = jQuery('<input type=checkbox name="' + ckboxName + '">');                    
                .....               

                jQuery(oldCkbox).replaceWith(newCkbox);


            });


            rowHtml += myTd.html();
            rowHtml += "</td>";
        });

        rowHtml += "</tr>";
        // empty to clean clone event
        jQuery(myRow).empty().addClass("rowData").removeClass("refreshData").html(rowHtml);

        count ++;           
    });

【讨论】：

关键点如下（重绘tr行）： //清空克隆事件 jQuery(myRow).empty().addClass("rowData").removeClass("refreshData"). html(rowHtml);