<!DOCTYPE html>
<html>
<head>
<title>tbl row copy and change attribut id</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*$("#table-data").on('click', 'input.addButton', function() {
var $tr = $(this).closest('tr');
var allTrs = $tr.closest('table').find('tr');
var lastTr = allTrs[allTrs.length-1];
var $clone = $(lastTr).clone();
$clone.find('td').each(function(){
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if(id) {
var i = id.substr(id.length-1);
var prefix = id.substr(0, (id.length-1));
el.attr('id', prefix+(+i+1));
el.attr('name', prefix+(+i+1));
}
});
$clone.find('input:text');
$tr.closest('table').append($clone);
});*/
$("#table-data").on('change', 'select', function(){
var val = $(this).val();
$(this).closest('tr').find('input:text').val(val);
});
});
function addrow(obj,ids){
var t=$(obj);
var idArr=ids.split('_');
var $tr = t.closest('tr');
var allTrs = $tr.closest('table').find('tr');
var t=parseInt(idArr[1])+1;
var lastTr = allTrs[t];
var $clone = $(lastTr).clone();
$clone.find('td').each(function(){
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if(id) {
var i = allTrs.length-2;
var prefix = id.substr(0, (id.length-1));
el.attr('id', prefix+(+i+1));
el.attr('name', prefix+(+i+1));
}
});
$clone.find('input:text');
$tr.closest('table').append($clone);
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>SelectOne</td>
<td>Select two</td>
<td>TetxBox</td>
<td>Select Three</td>
<td>Add</td>
</tr>
<tr>
<td>
<select id="Id_0" name="Id.0">
<option value=1>One</option>
<option value=2>Two</option>
</select>
</td>
<td>
<select id="Comparator_0" name="Comparator.0">
<option value=1>One</option>
<option value=2>Two</option>
</select>
</td>
<td><input type="text" id="Integer_0" name="Integer.0"/></td>
<td>
<select id="Value.0" name="Value.0">
<option value=1>One</option>
<option value=2>Two</option>
</select>
</td>
<td><input type="button" id="btn_0" onclick="addrow(this,this.id)" class="addButton" value="Add" /></td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>tbl row copy and change attribut id</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/*$("#table-data").on('click', 'input.addButton', function() {
var $tr = $(this).closest('tr');
var allTrs = $tr.closest('table').find('tr');
var lastTr = allTrs[allTrs.length-1];
var $clone = $(lastTr).clone();
$clone.find('td').each(function(){
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if(id) {
var i = id.substr(id.length-1);
var prefix = id.substr(0, (id.length-1));
el.attr('id', prefix+(+i+1));
el.attr('name', prefix+(+i+1));
}
});
$clone.find('input:text');
$tr.closest('table').append($clone);
});*/
$("#table-data").on('change', 'select', function(){
var val = $(this).val();
$(this).closest('tr').find('input:text').val(val);
});
});
function addrow(obj,ids){
var t=$(obj);
var idArr=ids.split('_');
var $tr = t.closest('tr');
var allTrs = $tr.closest('table').find('tr');
var t=parseInt(idArr[1])+1;
var lastTr = allTrs[t];
var $clone = $(lastTr).clone();
$clone.find('td').each(function(){
var el = $(this).find(':first-child');
var id = el.attr('id') || null;
if(id) {
var i = allTrs.length-2;
var prefix = id.substr(0, (id.length-1));
el.attr('id', prefix+(+i+1));
el.attr('name', prefix+(+i+1));
}
});
$clone.find('input:text');
$tr.closest('table').append($clone);
}
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
<tr>
<td>SelectOne</td>
<td>Select two</td>
<td>TetxBox</td>
<td>Select Three</td>
<td>Add</td>
</tr>
<tr>
<td>
<select id="Id_0" name="Id.0">
<option value=1>One</option>
<option value=2>Two</option>
</select>
</td>
<td>
<select id="Comparator_0" name="Comparator.0">
<option value=1>One</option>
<option value=2>Two</option>
</select>
</td>
<td><input type="text" id="Integer_0" name="Integer.0"/></td>
<td>
<select id="Value.0" name="Value.0">
<option value=1>One</option>
<option value=2>Two</option>
</select>
</td>
<td><input type="button" id="btn_0" onclick="addrow(this,this.id)" class="addButton" value="Add" /></td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment