Reputation: 5528
I want the tds (textboxes) to have unique id
's, so that I can get the values entered in those textboxes. How do I give the textboxes unique ids and get the values entered in these textboxes?
Here is my code:
<html>
<head>
<script type="text/javascript" src="jquery-1.3.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;
}
$(this)
.closest('tr')
.clone()
.appendTo('table');
$(this)
.text('Remove')
.removeClass('add')
.addClass('remove');
counter++;
});
$('a.remove').live('click',
function(){
$(this)
.closest('tr')
.remove();
counter--;
});
$('input:text').each(
function(){
var thisName = $(this).attr('name'),
thisRrow = $(this)
.closest('tr')
.index();
//$(this).attr('name', 'row' + thisRow + thisName);
// $(this).attr('id', 'row' + thisRow + thisName);
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += $('').val();
}
alert(msg);
});
});
</script>
</head><body>
<table>
<tr>
<th>Min Value</th>
<th>Max Value</th>
</tr>
<tr>
<td><input type="text" name="col1" id="col1" /></td>
<td><input type="text" name="col2" id="col2" /></td>
<td><a href="#" class="add">Add</a></td>
</tr>
<tr><input type='button' value='Get TextBox Value' id='getButtonValue'></tr>
</table>
</body>
</html>
Upvotes: 0
Views: 1887
Reputation: 11912
Use this when you create the new row...
var newRow =
$(this)
.closest('tr')
.clone()
.appendTo('table');
var i=1;
$('input',newRow).each(function(){
$(this)[0].id="Col"+counter+"_"+(i++)}
);
Upvotes: 1
Reputation: 27408
When you add a new row you have to assign the ids to its textboxes:
var i=0;
$(this)
.closest('tr')
.clone()
.appendTo('table')
.children()
.each(function(){
$(this)[i].id="textbox" + counter + (i++)}
I have chosen an id with the first number identifying the row and the second the column.
Upvotes: 1
Reputation: 11912
To give each of your <input>
boxes in the page unique ids use:
var i=0;
$('input').each(function(){
$(this)[0].id="TextBox"+(i++)}
);
This will give them ids of TextBox0
, TextBox1
etc...
However I notice that in your HTML posted all your input boxes already have unique ids. Are you or do you plan to add more dynamically at runtime?
Upvotes: 0