jQuery for dynamic Add/Remove row function, it's clone() objcet cannot modify element name
- by wcy0942
I'm try jQuery for dynamic Add/Remove row function, but I meet some question in IE8 , it's clone() objcet cannot modify element name and cannot use javascript form (prhIndexed[i].prhSrc).functionKey, but in FF it works very well, source code as attachment, please give me a favor to solve the problem.
<html>
$(document).ready(function() {
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Define some variables - edit to suit your needs
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// table id
var _table = jQuery("#prh"); // modify here
// tbody tbody
var _tableBody = jQuery("tbody",_table);
// buttons
var _addRowBtn = jQuery("#controls #addRow");
var _insertRowBtn= jQuery("#controls #insertRow");
var _removeRowBtn= jQuery("#controls #removeRow");
//check box all
var _cbAll= jQuery(".checkBoxAll", _table );
// add how many rows
var _addRowsNumber= jQuery("#controls #add_rows_number");
var _hiddenControls = jQuery("#controls .hiddenControls");
var blankRowID = "blankRow";
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//click the add row button
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_addRowBtn.click(function(){
// when input not isNaN do add row
if (! isNaN(_addRowsNumber.attr('value')) ){
for (var i = 0 ; i < _addRowsNumber.attr('value') ;i++){
var newRow = jQuery("#"+blankRowID).clone(true).appendTo(_tableBody)
.attr("style", "display: ''")
.addClass("rowData")
.removeAttr("id");
}
refreshTable(_table);
}
return false; //kill the browser default action
});
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//checkbox select all
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_cbAll.click(function(){
var checked_status = this.checked;
var prefixName = _cbAll.attr('name');
// find name prefix match check box (group of table)
jQuery("input[name^='"+prefixName+"']").each(function()
{
this.checked = checked_status;
});
});
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Click the remove all button
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_removeRowBtn.click(function(){
var prefixName = _cbAll.attr('name');
// find name prefix match check box (group of table)
jQuery("input[name^='"+prefixName+"']").not(_cbAll).each(function()
{
if (this.checked){
// remove tr row , ckbox name the same with rowid
jQuery("#"+this.name).remove();
}
});
refreshTable(_table);
return false;
});
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Click the insert row button
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_insertRowBtn.click(function(){
var prefixName = _cbAll.attr('name');
jQuery("input[name^='"+prefixName+"']").each(function(){
var currentRow = this.name;// ckbox name the same with rowid
if (this.checked == true){
newRow = jQuery("#"+blankRowID).clone(true).insertAfter(jQuery("#"+currentRow))
.attr("style", "display: ''")
.addClass("rowData")
.removeAttr("id");
}
});
refreshTable(_table);
return false;
});
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Function to refresh new row
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function refreshTable(_table){
var tableId = _table.attr('id');
var count =1; // ignore hidden column
// update tr rowid
jQuery ( "#"+tableId ).find(".rowData").each(function(){
jQuery(this).attr('id', tableId + "_" + count );
count ++;
});
count =0;
jQuery ( "#"+tableId ).find("input[type='checkbox'][name^='"+tableId+"']").not(".checkBoxAll").each(function(){
// update check box id and name (not check all)
jQuery(this).attr('id', tableId + "_ckbox" + count );
jQuery(this).attr('name', tableId + "_" + count );
count ++;
});
// write customize code here
customerRow(_table);
};
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//Function to customer new row : modify here
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function customerRow(_table){
var form = document.myform;
var pageColumns = ["prhSeq", "prhChannelproperty", "prhSrc"]; //modify here
var tableId = _table.attr('id');
var count =1; // ignore hidden column
// update tr rowid
jQuery ( "#"+tableId ).find(".rowData").each(function(){
for(var i = 0; i < pageColumns.length; i++){
jQuery ( this ).find("input[name$='"+pageColumns[i]+"']").each(function(){
jQuery(this).attr('name', 'prhIndexed['+count+'].'+pageColumns[i] );
// update prhSeq Value
if (pageColumns[i] == "prhSeq") {
jQuery(this).attr('value', count );
}
if (pageColumns[i] == "prhSrc") {
// clear default onfocus
//jQuery(this).attr("onfocus", "");
jQuery(this).focus(function() {
// doSomething
});
}
});
jQuery ( this ).find("select[name$='"+pageColumns[i]+"']").each(function(){
jQuery(this).attr('name', 'prhIndexed['+count+'].'+pageColumns[i] );
});
}// end of for
count ++;
});
jQuery ( "#"+tableId ).find(".rowData").each(function(){
// only for debug
alert ( jQuery(this).html() )
});
};
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
});
<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>
<tr id='prh_2' class="rowData">
<td><input type="checkbox" id='prh_ckbox2' name='prh_2' value=""/></td>
<td align="right"><input type="text" name="prhIndexed[2].prhSeq" maxlength="10" value="2" 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[2].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[2].prhSrc" maxlength="6" value="new" style="width:80px;background-color:#FFFFD7;">
<div id='displayPrhSrcName0'></div>
</td>
</tr>
</tbody>
</table>
