I have a simple screen, where I have already been able to create elements dynamically, with the click of the button, these elements are draggable up and down, and are two different elements, a textarea and a img that are added dynamically.
Iwantedtoputanindextype(inredintheimage)oneachelementthatwasadded,butthatindexneedstostayinthatexactpositionwithoutchangingalongwiththeelements,whatIwantistolinkthatindextotheelementthatisinitlineofit,doyouunderstand?
<divclass="wrapper">
<input type="button" style="margin-bottom: 10px;" id="add-row" value="Adicionar parágrafo" >
<input type="button" style="margin-bottom: 10px;" id="add-img" value="Adicionar imagem" >
<table id="t1" class="example">
<tr id="add-template-text">
<td></td>
<td>
<img class="drag-handle" src="drag2.png" height="25" width="25" alt="click and drag to rearrange" />
</td>
<td>
<!--<input id="tf1" type="text" value="I am in a table row!" /> -->
<input type="hidden">
<textarea class="tf" rows="2" cols="25"></textarea>
</td>
<td>
<img class="row-remover" src="remove.png" height="25" width="25" alt="Remove Row" />
</td>
</tr>
<tr id="add-template-img">
<td></td>
<td>
<img class="drag-handle" src="drag2.png" height="25" width="25" alt="click and drag to rearrange" />
</td>
<td>
<!--<input id="tf1" type="text" value="I am in a table row!" /> -->
<input class="tf" type="file" name="pic" accept="image/*">
</td>
<td>
<img class="row-remover" src="remove.png" height="25" width="25" alt="Remove Row" />
</td>
</tr>
</table>
</div>
/*
* jquery.dynotable.js
* Created on Aug 1, 2011 3:36:39 PM by bob
*/
(function($){
$.fn.extend({
dynoTable: function(options) {
var defaults = {
removeClass: '.row-remover',
cloneClass: '.row-cloner',
addRowTemplateIdText: '#add-template-text',
addRowTemplateIdImg: '#add-template-img',
addRowButtonId: '#add-row',
addRowButtonIdImg: '#add-img',
lastRowRemovable: true,
orderable: true,
dragHandleClass: ".drag-handle",
insertFadeSpeed: "slow",
removeFadeSpeed: "fast",
hideTableOnEmpty: true,
onRowRemove: function(){},
onRowClone: function(){},
onRowAdd: function(){},
onTableEmpty: function(){},
onRowReorder: function(){}
};
options = $.extend(defaults, options);
var cloneRow = function(btn) {
var clonedRow = $(btn).closest('tr').clone();
var tbod = $(btn).closest('tbody');
insertRow(clonedRow, tbod);
options.onRowClone();
}
var insertRow = function(clonedRow, tbod) {
var numRows = $(tbod).children("tr").length;
if(options.hideTableOnEmpty && numRows == 0) {
$(tbod).parents("table").first().show();
}
$(clonedRow).find('*').andSelf().filter('[id]').each( function() {
//change to something else so we don't have ids with the same name
this.id += '__c';
});
//finally append new row to end of table
$(tbod).append( clonedRow );
bindActions(clonedRow);
$(tbod).children("tr:last").hide().fadeIn(options.insertFadeSpeed);
}
var removeRow = function(btn) {
var tbod = $(btn).parents("tbody:first");
var numRows = $(tbod).children("tr").length;
if(numRows > 1 || options.lastRowRemovable === true) {
var trToRemove = $(btn).parents("tr:first");
$(trToRemove).fadeOut(options.removeFadeSpeed, function() {
$(trToRemove).remove();
options.onRowRemove();
if(numRows == 1) {
if(options.hideTableOnEmpty) {
$(tbod).parents('table').first().hide();
}
options.onTableEmpty();
}
});
}
}
var bindClick = function(elem, fn) {
$(elem).click(fn);
}
var bindCloneLink = function(lnk) {
bindClick(lnk, function(){
var btn = $(this);
cloneRow(btn);
return false;
});
}
var bindRemoveLink = function(lnk) {
bindClick(lnk, function(){
var btn = $(this);
removeRow(btn);
return false;
});
}
var bindActions = function(obj) {
obj.find(options.removeClass).each(function() {
bindRemoveLink($(this));
});
obj.find(options.cloneClass).each(function() {
bindCloneLink($(this));
});
}
return this.each(function() {
//Sanity check to make sure we are dealing with a single case
if(this.nodeName.toLowerCase() == 'table') {
var table = $(this);
var tbody = $(table).children("tbody").first();
if(options.orderable && jQuery().sortable) {
$(tbody).sortable({
handle : options.dragHandleClass,
helper: function(e, ui) {
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
},
// items: "tr",
update : function (event, ui) {
options.onRowReorder();
}
});
}
$(table).find(options.addRowTemplateIdText).each(function(){
$(this).removeAttr("id");
var tmpl = $(this);
tmpl.remove();
bindClick($(options.addRowButtonId), function(){
var newTr = tmpl.clone();
insertRow(newTr, tbody);
options.onRowAdd();
return false;
});
//var contador = 0;
$('#add-row').on('click', function(){
// contador++; // somar +1
$('tr:last td:first-child').html($("#t1 tr").length);
});
});
$(table).find(options.addRowTemplateIdImg).each(function(){
$(this).removeAttr("id");
var tmpl = $(this);
tmpl.remove();
bindClick($(options.addRowButtonIdImg), function(){
var newTr = tmpl.clone();
insertRow(newTr, tbody);
options.onRowAdd();
return false;
});
// var contador = 0;
$('#add-img').on('click', function(){
//contador++; // somar +1
//var contador = $("#t1 tr").length ;
$('tr:last td:first-child').html($("#t1 tr").length);
});
});
bindActions(table);
var numRows = $(tbody).children("tr").length;
if(options.hideTableOnEmpty && numRows == 0) {
$(table).hide();
}
}
});
}
});
})(jQuery);
Here is the link with what I have done so far.