JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://lunarlogic.github.io/dolly.js/javascripts/dolly.js"></script>
<body></body>
CSS
table, th, td {
border: 5px solid white;
padding: 0;
}
table {
border-collapse: collapse;
}
JavaScript
var tableController = {
onClone: function (el, cloneX, cloneY) {
var currentCell = $(el),
currentRow = currentCell.parent(),
index = currentCell.index(),
nextCellMethod = cloneX > 0 ? "next" : "prev",
nextRowMethod = cloneY > 0 ? "next" : "prev",
amountX = Math.abs(cloneX),
amountY = Math.abs(cloneY);
for (var row = currentRow; amountY >= 0; row = row[nextRowMethod](), amountY--) {
var amX = amountX;
for (var cell = row.find('td').eq(index); amX >= 0; cell = cell[nextCellMethod](), amX--) {
var currentVal = currentCell.find('input').val();
cell.find('input').val(currentVal);
}
}
},
render: function () {
var self = this;
this.element.html("");
for (var i = 0; i < 5; i++) {
var row = $("<tr></tr>");
for (var j = 0; j < 5; j++) {
row.append($("<td><input type='text' size='2'></td>"));
}
this.element.append(row);
}
$("td").dolly({
cloned: function (event, ui) {
self.onClone(this, ui.cloneX, ui.cloneY);
}
});
}
};
tableController.element = $("<table></table>").appendTo("body");
tableController.render();