Это мое полное решение для анализа внешней таблицы и вложенной таблицы:
Это мое решение (я еще не реализовал ценное предложение Bear):
Добавьте таблицу и вложенную таблицу. -table:
var newRows = "";
newRows += "<tr><td class='button'><button type='button' name='addPDRow'><span class='glyphicon glyphicon-plus'></span></button></td>";
newRows += "<td class='keyvalue'><input class='timeWidth pdValue' name='row0' value='07:00'></input></td>"; //Time
newRows += "<td class='keyvalue'><input class='activityWidth pdValue' name='row0'></input>" //Activity
//Activity table
newRows += "<table name ='activityTable'>";
newRows += "<tbody name='activity2Tablebody'>";
newRows += "<tr>";
newRows += "<td class='dropValue'>";
//Put a transparent div over the inputs elements so it can be dragged to remove
newRows += "<div class='dragabbleRemove'><div> </div>";
newRows += "<input type='text' class='droppableItem activityWidth' disabled></input>";//Droppable Activity Class
newRows += "</div>";
newRows += "</td>";
newRows += "</tr>";
newRows += "</tbody>";
newRows += "</table>";
newRows +="</td>";
newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Location
newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Equip. Needed
newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Youth to Bring
newRows += "<td class='keyvalue'><input class='pdValue' name='row0'></input></td>";//Leaders
newRows += "<td class='button'><button type='button' name='removePDRow'><span class='glyphicon glyphicon-minus'></button></td></tr>";
$('#programDetailTablebody').append(newRows);
$( makeDroppable );
Обработайте удаление элемента, сделайте поле не подлежащим сбросу (только при падении в каждой строке), сделайте оверлей div для перетаскиваемого поля таким образом, чтобы его можно было удалить, добавьте новая строка для перетаскивания:
function makeDroppable() {
$('.droppableItem').droppable({
hoverClass: 'hovered',
drop: function( event, ui ) {
var droppable = $(this);
var draggable = ui.draggable;
// Move draggable into droppable
var drag = $('.droppableItem').has(ui.draggable).length ? draggable : draggable.clone().draggable({
revert: "invalid",
stack: ".dragabbleItem",
helper: 'clone'
});
//Add the dragged item to the row/field
drag.appendTo(droppable);
//Get the id of the draggable item
draggableId = (draggable.prop('id'));
//Stop the dropped item from being draggable
drag.draggable('disable');
//Set input value
droppable.prop('value', draggable.text());
//Set the name to the id of the element dragged onto it
droppable.prop('name', draggableId);
//Format the row/field dropped into with a blue background
droppable.css({top: '5px', left: '5px', background: '#B0C4DE'});
//Do not allow another item to be dropped into this row/field
droppable.droppable('disable');
//If this row/filed is dragged then remove it
makeDraggableRemove();
//Add a new row/field to drag to after the current table row
//Put a transparent div over the inputs elements so it can be dragged to remove
$("<tr><td class='dropValue' name='test2'><div class='dragabbleRemove'><div> </div><input type='text' class='droppableItem activityWidth' disabled></input></div></td></tr>").insertAfter($(this).closest('tr'));
}
});
}
Анализ таблиц:
function getProgramLines() {
//Main table
var records = [];
var keyNames = ['plRow','plTime', 'plActivity', 'plLocation', 'plEquipNeeded', 'plYouthToBring', 'plLeaders'];
//Activity Classes
var records2 = [];
var keyNames2 = ['acRow','acId'];
//Note: the > in the line below means only the main table is parsed and not the sub-table as well!
$("#programDetailTable > tbody > tr").each(function(i) {
var record = {};
var k = 0;
$('td', this).each(function(j) {
if (keyNames[k]){
if ($.trim($(this).attr('class')) === 'keyvalue') {
var text = $.trim($(this).find(".pdValue").val()); // GET TRIMMED TEXT
if (k === 0){
record[keyNames[k]] = i;
k++;
}
record[keyNames[k]] = text;
k++;
if (k === 6) {
records.push(record);
}
}else{
alert("loop");
if ($.trim($(this).attr('class')) === 'dropValue') {
$(this).find('input[type="text"]').each(function(index,elem){
if (elem.name){
var record2 = {};
record2[keyNames2[0]] = i;//Store (link to) the main table row number
record2[keyNames2[1]] = elem.name;//Store the Activity Typde id
records2.push(record2);
}
});
}
}
}
});
});
return [records, records2];
}