我需要通过按钮点击或拖放重新排列上下列出的里程碑。
如何在单击按钮或通过JavaScript拖放后交换输入文本（行）的值。
有什么建议吗？
<table id="wpMilestoneTable" class="tabelle dataTable" cellpadding="0" cellspacing="0" style="border-bottom: 0px;">
<colgroup>
<col width="10px">
<col width="800px">
<col width="70px">
<col width="70px">
</colgroup>
<thead>
<tr class="tabelle_headline">
<th colspan="2">
Milestones
<span class="blue">*</span>
</span>
<div style="display: none;"></div>
</th>
<th>
Target Date
<span class="blue">*</span>
</span>
<div style="display: none;"></div>
</th>
<th>
Completed Date
</span>
<div style="display: none;"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td align="right" valign="top"><span class="milestoneFldIndex" style="width: 18px;"><b>1.</b></span>
</td>
<td>
<textarea name="MILESTONE_TEXT_1" id="MILESTONE_TEXT_1" versioning="true" style="width: 100%;">TEST</textarea>
</td>
<td>
<span id="msTargetDate_1" style="width: 50px;"><span id="MILESTONE_TARGET_DATE_1_2">
<input type="hidden" name="MILESTONE_TARGET_DATE_1_2_cal" id="MILESTONE_TARGET_DATE_1_2_cal" value="2015-08-06" versioning="true"><span id="dspl_MILESTONE_TARGET_DATE_1_2" style="width: 80px;">08/06/2015</span><img id="trigger_MILESTONE_TARGET_DATE_1_2" src="/images/calendar.gif" style="height: 15px; width: 15px;"><img src="/images/calendar_delete.gif" style="height: 15px; width: 15px;">
</span>
</span>
</td>
<td><span id="msCompletionDate_1" versioning="true" style="width: 50px;"><span id="MILESTONE_COMPLETION_DATE_1_3"><input type="hidden" name="MILESTONE_COMPLETION_DATE_1_3_cal" id="MILESTONE_COMPLETION_DATE_1_3_cal" value="undefined--undefined"><span id="dspl_MILESTONE_COMPLETION_DATE_1_3" style="width: 80px;"></span><img id="trigger_MILESTONE_COMPLETION_DATE_1_3" src="/images/calendar.gif" style="height: 15px; width: 15px;"><img src="/images/calendar_delete.gif" style="height: 15px; width: 15px;">
</span>
</span>
</td>
</tr>
<tr>
<td align="right" valign="top" style="border-top: 1px solid rgb(0, 0, 0);"><span class="milestoneFldIndex" style="width: 18px;"><b>2.</b></span>
<br><img src="/images/icons/ba_remove.gif" name="deleteMilestone2" style="cursor: pointer;">
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);">
<textarea name="MILESTONE_TEXT_2" id="MILESTONE_TEXT_2" versioning="true" style="width: 100%;">TET4 </textarea>
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);"><span id="msTargetDate_2" style="width: 50px;"><span id="MILESTONE_TARGET_DATE_2_4"><input type="hidden" name="MILESTONE_TARGET_DATE_2_4_cal" id="MILESTONE_TARGET_DATE_2_4_cal" value="undefined--undefined" versioning="true"><span id="dspl_MILESTONE_TARGET_DATE_2_4" style="width: 80px;"></span><img id="trigger_MILESTONE_TARGET_DATE_2_4" src="/images/calendar.gif" style="height: 15px; width: 15px;"><img src="/images/calendar_delete.gif" style="height: 15px; width: 15px;">
</span>
</span>
</td>
</span>
</span>
</td>
</tr>
<tr>
<td align="right" valign="top" style="border-top: 1px solid rgb(0, 0, 0);"><span class="milestoneFldIndex" style="width: 18px;"><b>3.</b></span>
<br><img src="/images/icons/ba_remove.gif" name="deleteMilestone3" style="cursor: pointer;">
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);">
<textarea name="MILESTONE_TEXT_3" id="MILESTONE_TEXT_3" versioning="true" style="width: 100%;">TEST5 </textarea>
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);"><span id="msTargetDate_3" style="width: 50px;"><span id="MILESTONE_TARGET_DATE_3_6"><input type="hidden" name="MILESTONE_TARGET_DATE_3_6_cal" id="MILESTONE_TARGET_DATE_3_6_cal" value="undefined--undefined" versioning="true"><span id="dspl_MILESTONE_TARGET_DATE_3_6" style="width: 80px;"></span><img id="trigger_MILESTONE_TARGET_DATE_3_6" src="/images/calendar.gif" style="height: 15px; width: 15px;"><img src="/images/calendar_delete.gif" style="height: 15px; width: 15px;">
</span>
</span>
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);"><span id="msCompletionDate_3" versioning="true" style="width: 50px;"><span id="MILESTONE_COMPLETION_DATE_3_7"><input type="hidden" name="MILESTONE_COMPLETION_DATE_3_7_cal" id="MILESTONE_COMPLETION_DATE_3_7_cal" value="undefined--undefined"><span id="dspl_MILESTONE_COMPLETION_DATE_3_7" style="width: 80px;"></span><img id="trigger_MILESTONE_COMPLETION_DATE_3_7" src="/images/calendar.gif" style="height: 15px; width: 15px;"><img src="/images/calendar_delete.gif" style="height: 15px; width: 15px;">
</span>
</span>
</td>
</tr>
<tr>
<td align="right" valign="top" style="border-top: 1px solid rgb(0, 0, 0);"><span class="milestoneFldIndex" style="width: 18px;"><b>4.</b></span>
<br><img src="/images/icons/ba_remove.gif" name="deleteMilestone4" style="cursor: pointer;">
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);">
<textarea name="MILESTONE_TEXT_4" id="MILESTONE_TEXT_4" versioning="true" style="width: 100%; color: rgb(136, 136, 136);">Milestone Description</textarea>
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);"><span id="msTargetDate_4" style="width: 50px; color: rgb(136, 136, 136);"><span id="MILESTONE_TARGET_DATE_4_8"><input type="hidden" name="MILESTONE_TARGET_DATE_4_8_cal" id="MILESTONE_TARGET_DATE_4_8_cal" value="undefined--undefined" versioning="true"><span id="dspl_MILESTONE_TARGET_DATE_4_8" style="width: 80px;"></span><img id="trigger_MILESTONE_TARGET_DATE_4_8" src="/images/calendar.gif" style="height: 15px; width: 15px;"><img src="/images/calendar_delete.gif" style="height: 15px; width: 15px;">
</span>
</span>
</td>
<td style="border-top: 1px solid rgb(0, 0, 0);"><span id="msCompletionDate_4" versioning="true" style="width: 50px; color: rgb(136, 136, 136);"><span id="MILESTONE_COMPLETION_DATE_4_9"><input type="hidden" name="MILESTONE_COMPLETION_DATE_4_9_cal" id="MILESTONE_COMPLETION_DATE_4_9_cal" value="undefined--undefined"><span id="dspl_MILESTONE_COMPLETION_DATE_4_9" style="width: 80px;"></span><img id="trigger_MILESTONE_COMPLETION_DATE_4_9" src="/images/calendar.gif" style="height: 15px; width: 15px;"><img src="/images/calendar_delete.gif" style="height: 15px; width: 15px;">
</span>
</span>
</td>
</tr>
</tbody>
</table>