BornTo FreeFall

Я могу вам предложить следующий вариант:

1. Реализуете на jQuery событие, отвечающее за вызов модального окна с помощью AJAX (покажу на своем примере):

let editButton = $("#edit-button");

editButton.on('click', function () {
    let articleId = $(this).attr("article-id"); // Здесь будет храниться идентификатор записи, которую хотите отредактировать (article-id произвольное название)
    $("#genElement").load("/api/v1/article-edit.php?ID=" + articleId); // genElement - пустой блок на странице, куда будем получать модальное окно 
});
// Подробнее: https://api.jquery.com/load/

2. В шаблоне или на странице, где лежит ваша таблица делаете следующий блок (в него будет передаваться модальное окно с данными, повторюсь):

<!-- Сюда будет приходить наше модальное окно -->
<div id="genElement">

</div>

Далее, нам необходимо реализовать ту самую вашу страницу, где у вас была заполнена форма. Такие страницы обычно размещаю по пути: /api/.../pageName.php (например).

Туда вы вставляете код вашей страницы с данными, и реализуете тот функционал, который у вас был при редактировании. Не самый лучший пример, но он стопроцентно работает.

Например, вот так:

html {
    scroll-behavior: smooth;
}

Но есть одна побочка, что не все браузеры поддерживают такой подход. Зато без JS)

Либо с элементами небольшого JS кода:

// Проходимся по всем элементам "linkList", и делаем выборку по ссылкам (a с атрибутом href, который равен "#")
const anchors = document.querySelectorAll('.linkList a[href*="#"]')

for (let anchor of anchors) {
  anchor.addEventListener('click', function (e) {
  e.preventDefault()
   
  const blockID = anchor.getAttribute('href').substr(1)
   
  document.getElementById(blockID).scrollIntoView({
  behavior: 'smooth',
  block: 'start'
  })
  })
}

Вот вам пример реализации "расширения" таблицы. Осталось лишь немного доделать...

<button id="addcolumn">Add Column</button>
<button id="addrow">Add Row</button>

	<table width="100%" border="1" cellpadding="0" cellspacing="0">
    
    <thead id="theads">
    	<tr>
        	<th class="th" contenteditable>Heading</th>
            <th class="th" contenteditable>Heading</th>
        </tr>
    </thead>
    
    <tbody id="tbody">
    	
    </tbody>
    
    </table>

$(document).ready(function () {
    var $cell = $('<td>', {
        'class': 'td',
        'align': 'center',
        'contenteditable': '',
        'text': 'Content'
    });
    
    var $header = $('<th>', {
        'class': 'th',
        'contenteditable': '',
        'text': 'Heading'
    });
    
	$('#addcolumn').click(function() {
        $header.clone().appendTo('thead tr');
        $cell.clone().appendTo('tbody tr');
	});
	
	$('#addrow').click(function(){
        var $row = $('<tr>');
        
        $('th').each(function() {
            $cell.clone().appendTo($row);
        });
        
        $row.appendTo('tbody');
	});
});

Источник: Клик

Проверяйте. Принцип работы прост... Существует поле (input) с идентификатором "input-id". В нашем JS коде мы инициализируем переменную, хранящую в себе полученный объект, на который мы вешаем listener с аргументом input. Это означает, что при любом вводе в наше поле он будет отрабатывать. Далее, мы проверяем... Действительно ли нулевой элемент из input'а не равен "@". И если это так, то мы его дописываем в самое начало.

<input id="input-id" />

let selectedInput = document.querySelector("#input-id");
selectedInput.addEventListener("input", function() {
    if (this.value[0] != '@') {
        this.value = '@' + this.value;
    }
});

Честно говоря, не особо силен в JS коде, но такая вариация для начального понимания сойдет.