Reputation: 17
I want to copy and paste excel columns or any similar lists into HTML table. I have found this code, but there is an issue. It pastes data like a row. So how can I change It to paste like a column? Thanks in advance.
$(document).ready(function() {
$('td input').bind('paste', null, function (e) {
$this = $(this);
setTimeout(function () {
var columns = $this.val().split(/\s+/);
var i;
var input = $this;
for (i = 0; i < columns.length; i++) {
input.val(columns[i]);
if( i % 3 !== 2){
input = input.parent().next().find('input');
} else{
input = input.parent().parent().next().find('input');
}
}
}, 0);
});
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</thead>
<tbody>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</tbody>
</table>
Upvotes: 1
Views: 6692
Reputation: 106
Here is solution for you:
$(document).ready(function() {
$('td input').bind('paste', null, function(e) {
$input = $(this);
setTimeout(function() {
var values = $input.val().split(/\s+/),
row = $input.closest('tr'),
col = $input.closest('td').index();
console.log(col);
for (var i = 0; i < values.length; i++) {
row.find('input').eq(col).val(values[i]);
row = row.next();
}
}, 0);
});
});
Upvotes: 2