jQuery for dynamic Add/Remove row function, it's clone() object cannot modify element name_问答_开发者

I'm trying to use jQuery to add dynamic Add/Remove row function, but I meet some question in IE8, its clone() object cannot modify element name and cannot use javascript form (prhIndexed[i].prhSrc).functionKey.

In FireFox it works very well, source code as attachment, please do me a favor and help me to solve the problem.

<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>

I really recommend to ask specified, short and clear questions. Not many people are willing to crawl through all your code & markup to find an error for you.

I just noticed one thing, maybe it has to do with your problem:

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

Several things here:

Modifiying the style with .attr() is not a good idea. Use jQuerys .css() function.

Setting display to an empty string like you do, is also not a good idea. Do:

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

or natively

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

So basically that call should look like this:

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

In last weet,I was redraw my table, the problem finised !!

        // 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 ++;           
    });