jQuery для динамической функции добавления / удаления строк, ее объект clone () не может изменить имя элемента - PullRequest
Новая
       23

jQuery для динамической функции добавления / удаления строк, ее объект clone () не может изменить имя элемента

1 голос
/ 07 июня 2010

Я пытаюсь использовать jQuery для добавления динамической функции добавления / удаления строк, но я сталкиваюсь с некоторым вопросом в IE8, его объект clone () не может изменить имя элемента и не может использовать форму javascript (prhIndexed [i] .prhSrc). functionKey.

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

Ответы [ 2 ]

6 голосов
/ 07 июня 2010

Очень рекомендую задавать уточненные, короткие и понятные вопросы. Не многие люди хотят просмотреть весь ваш код и разметку, чтобы найти ошибку для вас.

Я только что заметил одну вещь, возможно, это связано с вашей проблемой: 

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");
0 голосов
/ 18 июня 2010

В последний раз я перерисовал свой стол, проблема решена !! 

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