我正在尝试使用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>
我真的建议问一些明确的,简短的问题.没有多少人愿意抓取您的所有代码和标记来为您找到错误.
我刚注意到一件事,也许它与你的问题有关:
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");