当前位置： 文江博客话题详情

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

发布于 2024-09-04 18:53:53 字数 5389 浏览 5 评论 0原文

我正在尝试使用 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>

超文本标记语言

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

晨敛清荷 2024-09-11 18:53:53

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

我刚刚注意到一件事，也许它与您的问题有关：

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

这里有几件事：

用 .attr() 修改样式不是一个好主意。使用 jQuery 的 .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");

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");
回复 原文
伊面 2024-09-11 18:53:53

上周，我重新绘制了表格，问题解决了！

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

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 ++;           
    });
回复 原文
~没有更多了~

关于作者

本宫微胖

暂无简介

0 文章
0 评论
557 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文