Jquery change id of child element
I am creating one new row like
var newRow = $(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');
Now i want to change the id of the input element.How to do this? I am thinking of
var i = gridInAnsLength;
$('input', newRow).each(function() {
$(this)[0].id = "Col" + counter + "_" + (i++)
});
But its not workin.Please Suggest.
My html mock up is like
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js">
</script>
<style type="text/css">
div{ padding:4px; }
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(
function() {
var counter = 2;
$('a.add').live('click', function() {
if (counter > 5) {
alert("Only 5 textboxes allowed");
return false;
}
var newRow =
$(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');
var i = 2;
$('input', newRow).each(function() {
$(this).attr("id", "Col"+ (i++));
});
$(this).text('Remove').removeClass('add').addClass('remove');
counter++;
});
$('a.remove').live('click', function() {
$(this).closest('tr').remove();
counter--;
});
$("#getButtonValue").click(function() {
var gridInAnswerValuesHtml = "";
$(".grdAns").each(function() {
//ansString += this.value+",";
gridInAnswerValuesHtml += "<input type = \"hidden\" name = \"gridInAnswers\" value = \"";
gridInAnswerValuesHtml += this.value;
gridInAnswerValuesHtml += "\">";
});
alert(gridInAnswerValuesHtml);
});
});
</script>
</head>
<body>
<table id="gridInAnswers">
<tr>
<th>
Min Value
</th>
<th>
Max Value
</th>
</tr>
<tr>
<td>
<input type="text" name="col1" id="Col1_2" class="grdAns" />
</td>
<td>
开发者_开发知识库 <input type="text" name="col1" id="Col1_3" class="grdAns" />
</td>
<td>
<a href="#" class="add">Add</a>
</td>
</tr>
<tr>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</tr>
</table>
</body>
use jquery's attr
http://api.jquery.com/attr/
$('#yourold').attr('id', 'newid');
You can use the attr() method to set the id:
var i = gridInAnsLength;
$('input', newRow).each(function() {
$(this).attr("id", "Col" + counter + "_" + (i++));
});
I have change my solution and I think this will solve your problem. You need to change 2 things if this is ok with you. First Change your id format to
id="Col_1_2"
id="Col_1_3"
Second, Replace your javascript code to this
function() {
var counter = 2;
$('a.add').live('click', function() {
if (counter > 5) {
alert("Only 5 textboxes allowed");
return false;
}
//var newRow=$(this).closest('tr').clone().appendTo('#gridInAnswers').find('input').val('');
var newRowHTML = $(this).closest('tr').clone()[0].outerHTML;
var theClone = $(this).closest('tr').clone().find('input');
$(theClone).each(function(){
var TheID = $(this).attr("id").split('_');
newRowHTML=newRowHTML.replace($(this).attr("id"),TheID[0]+"_"+(parseInt(TheID[1])+1)+"_"+TheID[2]);
});
var newRow = $(newRowHTML).appendTo('#gridInAnswers').find('input').val('');
var i = 2;
$(this).text('Remove').removeClass('add').addClass('remove');
counter++;
});
$('a.remove').live('click', function() {
$(this).closest('tr').remove();
counter--;
});
$("#getButtonValue").click(function() {
var gridInAnswerValuesHtml = "";
$(".grdAns").each(function() {
//ansString += this.value+",";
gridInAnswerValuesHtml += "<input type = \"hidden\" name = \"gridInAnswers\" value = \"";
gridInAnswerValuesHtml += this.value;
gridInAnswerValuesHtml += "\">";
});
alert(gridInAnswerValuesHtml);
});
}
I'm sure this will solve your problem. Please don't forget to vote if it helps and also don't forget to mark as the answer if it solves your problem. Thanks! :)
加载中,请稍侯......
精彩评论