Константин Громов

Замените

$.get('programs/programs.html', function(data) {
  $(target).html(data);
  here.append(data);
});

на

$.get('programs/programs.html', function(data) {
  here.append($(data).find(target));
});

С таким подходом у вас легко может возникнуть дублирование айдишников, например, при повторном клике по той же ссылке.

// jQuery
$("#element").css("width", "");

// Native
document.querySelector("#element").style.width = "";

Потому, что td это не input, и нужно использовать text/html вместо val. Или вовсе не использовать jQuery где оно не нужно:

{Order: this.cells[2].textContent}

Тогда все ваши модули будут инициализироваться в одном обработчике DOMContentLoaded = в одной функции = в одной области видимости = конфликты имён переменных. Чтобы избежать этого, придётся оборачивать каждый модуль в самовызывающуюся функцию, получая

$(function() {
  (function() {/* module1 */})();
  (function() {/* module2 */})();
  (function() {/* module3 */})();
});

вместо

$(function() {/* module1 */});
$(function() {/* module2 */});
$(function() {/* module3 */});

и, собственно, чего мы добились? Это не говоря о мусоре в настройке сборщика. Убить в себе бессмысленный перфекционизм одна из важнейших составляющих для эффективного и качественного программирования.

function replaceChars(string, from, to) {
  if (string[from] != undefined && string[to] != undefined) {
    var newString = Array.prototype.slice.call(string);

    newString[from] = string[to];
    newString[to] = string[from];

    return newString.join("");
  } else {
    return string;
  }
}

replaceChars("qwerty", 2, 4); // "qwtrey"

var fields = [];

$(".fields .services").each(function() {
  fields.push($("select option:selected", this).text() + ";" + $(".sum-input", this).val());
});

console.log(fields);

Или

var fields = $(".fields .services").map(function() {
  return $("select option:selected", this).text() + ";" + $(".sum-input", this).val();
});

fields = $.makeArray(fields);

console.log(fields);

Пример как работать с элементами фрейма. Если же фрейм подгружается по src, то доступ к его window будет лишь в случае совпадения протокола, порта и домена с основным окном. Это обусловлено политикой безопасности браузера.

К подсказке браузера при наведении обращаться нельзя. По сути она тоже формируется из href, хоть и независимо от присутствия во фрейме.

Баги jQuery, либо особенности его поведения. В нативном виде всё предсказуемо.

Набросок: jsfiddle.net/0hwrb4he. Надо ещё доработать функцию updatePrimaryDirection, чтобы правильно работала с вертикально-ориентированными изображениями; проверить как работает в IE9; обработать ситуацию когда пропорции контейнера и изображения почти равны и анимация становится очень дёрганной, и подобные мелочи.

По вертикали никак не получится одним лишь CSS, он не позволяет внутри селектора перескакивать на другую ветку dom-дерева, а именно это и подразумевается в данной задаче. Собственно, вы итак используете JS для удаления строк/столбцов, лишний блок кода вам жизнь не испортит.

Для перевода в html вам всё-равно придётся добавлять все элементы в один контейнер, чтобы брать его innerHTML. То есть вы будете делать ту же самую вставку, разве что в памяти, плюс вставка уже самого текста в dom, из которого потом браузер по новой будет создавать объектное представление элементов. Слишком много мусора получается.

Как вариант решения, можно саму вставку проводить нативными средствами. jsfiddle.net/bpd7b1dx тут наглядно видна разница в скорости.

Насчёт documentFragment'а сказать ничего не могу, читал лишь, что в современных браузерах он особой пользы не несёт, но в таком же тесте на 1000 элементов был прирост на ~20% в сравнении с обычной нативной вставкой.

Основная проблема связана с расчётом ширины и отступов у "div.FFF". Вы совмещаете проценты с пикселями и в итоге появляются незаполненные области, потому что такой подход негибок, по крайней мере, в вашем исполнении.

Вот пример как вам можно реализовать то, что вы хотите: jsfiddle.net/e1b3d4z3.

Без jQuery, изменяя текущую таблицу. Пример: jsfiddle.net/shLc292n.

function mergeCells(table) {
  var head = table.rows[0],
      body = table.rows[1],
      resultHead = "",
      resultBody = "",
      matches = {};

  for (var i = 0; i < body.cells.length; i++) {
    var headCellText = head.cells[i].textContent,
        bodyCellText = body.cells[i].textContent,
        match = matches[bodyCellText] || (matches[bodyCellText] = []);

    match.push(headCellText);
  }

  for (var key in matches) {
    var match = matches[key],
        from = match[0],
        to = match[match.length - 1];

    if (match.length > 1) {
      resultHead += "<td>" + from + "-" + to + "</td>";
    } else {
      resultHead += "<td>" + from + "</td>";
    }

    resultBody += "<td>" + key + "</td>";
  }

  head.innerHTML = resultHead;
  body.innerHTML = resultBody;
}