[ad_1]
Asked
Viewed
2 times
I’ve two tables in dynamic web page. One (table1) contains different properties as header and respective data in those columns and another (table2) contains rows with same property names. I have provided drag and drop for reordering the rows of table2. How can I change the column order of table1 as per the changed sequencing of table2 after drag and drop? (i.e. if status is reordered to different index in table2 it should be reordered in table1 as well)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
$("#tblLocations").sortable({
items: 'tr',
cursor: 'pointer',
axis: 'y',
dropOnEmpty: false,
start: function (e, ui) {
ui.item.addClass("selected");
},
stop: function (e, ui) {
ui.item.removeClass("selected");
$(this).find("tr").each(function (index) {
if (index > 0) {
$(this).find("td").eq(2).html(index);
}
});
}
});
});
</script>
//table2
<div class="os-content" id="chboxes" >
<table id="tblLocations" >
<tr draggable="true" ondragstart="start()" ondragover="dragover()">
<td>
<input type="checkbox" name="status" checked="checked">
<label for="vehicle1" style="font-size: medium; font-weight: 500;">Status</label><br></td>
</tr>
<tr draggable="true" ondragstart="start()" ondragover="dragover()">
<td>
<input type="checkbox" name="projectcode" checked="checked">
<label for="vehicle1" style="font-size: medium; font-weight: 500;">Project Code</label><br></td>
</tr>
<tr draggable="true" ondragstart="start()" ondragover="dragover()">
<td>
<input type="checkbox" name="number" checked="checked">
<label for="vehicle1" style="font-size: medium; font-weight: 500;">Number</label><br></td>
</tr>
<tr draggable="true" ondragstart="start()" ondragover="dragover()">
<td>
<input type="checkbox" name="title" checked="checked">
<label for="vehicle1" style="font-size: medium; font-weight: 500;">Title</label><br></td>
</tr>
</table>
</div>
//table1
<div class="row">
<table id="tab" >
<thead class="ui-state-default">
<tr>
<th class="status">Status</th>
<th class="projectcode">Project Code</th>
<th class="number">number</th>
<th class="title">Title</th>
</tr>
<tr>
<td>open</td>
<td>pro</td>
<td>123</td>
<td>head</td>
</tr>
<tr>
<td>open</td>
<td>pro</td>
<td>123</td>
<td>head</td>
</tr>
<tr>
<td>open</td>
<td>pro</td>
<td>123</td>
<td>head</td>
</tr>
</thead>
</table>
</div>
asked 35 secs ago
default
[ad_2]