如何在表格可排序后替换texarea名称和id

Question

我有里程碑列表，我正在使用表格排序功能通过拖放来改变里程碑序列。

我担心的是如何在拖放行后更新textarea名称和ID。

例如，当我将第三行拖放到第一行时，我需要将所有文本区域的id和名称重新排列为

MILESTONE_TEXT_1
MILESTONE_TEXT_2
MILESTONE_TEXT_3
MILESTONE_TEXT_4

＆＃13;

＆＃13;

jQuery(document).ready(function($) {

      var tableID = '#wpMilestoneTable';

      var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index) {
          $(this).width($originals.eq(index).width())
        });
        return $helper;
      };

      $(tableID + " tbody").sortable({
        stop: function(event, ui) {
          renumber_table1('#wpMilestoneTable')
        },
        helper: fixHelperModified
      }).disableSelection();


      function renumber_table1(tableID) {


        var index = Math.floor((Math.random() * 1000) + 1);
        var $tr = $(tableID).find('tr');
        $tr.find('td').each(function() {
            var $input = $(this).find('textarea');


          }
        });

    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;