jQuery和CSS调整表格列选择第2列到*

Question

嘿所有这些是我目前的代码：

var tblDataNum = tblID.split('_');
var jsGridName = "";
var pressed = "";
var start = "";
var index = "";
var startX = "";
var startWidth; = "";

var container;

if (tblDataNum[1] == 0) {
    jsGridName = "Pending";
} else if (tblDataNum[1] == 1) {
    jsGridName = "Approved";
} else if (tblDataNum[1] == 2) {
    jsGridName = "Denied";
}

$("table#" + tblID + " th")
    .css({
        position: "relative"
    })

    .prepend("<div class='resizer'></div>")
    .resizable({
        resizeHeight: false,
        handleSelector: "",
        onDragStart: function (e, $el, opt) {
            if (!$(e.target).hasClass("resizer"))
                return false;
            return true;
        }
    });

$("table#" + tblID + " th").mousedown(function (e) {
    start = $(this).addClass("resizing");
    index = $(this).index()
    startX = e.pageX;
    startWidth = start.width();
    pressed = true;
});

$(document).mousemove(function (e) {
    if (pressed) {
        var newWidth = startWidth + (e.pageX - startX);

        console.log(newWidth);

        if (newWidth > 5) {
            start.width(newWidth);
            $("#the-jsgrid-table_" + tblDataNum[1] + " td").eq(index).width(newWidth);

            if (refreshScrollBar) {
                //$("#jsGrid_" + jsGridName).mCustomScrollbar("update");
                $("#jsGrid_" + jsGridName).getNiceScroll().resize()
            }
        }
    }
});

$(document).mouseup(function () {
    if (pressed) {
        $(start).removeClass("resizing");
        pressed = false;
    }
});

现在它仍然可以正常工作。它允许我调整表格中我想要的任何列。

然而，问题在于我希望跳过标题，并开始在行数据的第二个（实际上是第一个）开始调整大小。

这是我的表格html：

<table id="displayTbl_0" style="background-color: #fff4a3" class="jsgrid-table">
  <tbody>
    <tr class="jsgrid-header-row">
      <th id="number" class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable"
      style="width: 80px; position: relative;">
      <div class="resizer"></div>number
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>
      <th id="line"
      class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable jsgrid-header-sort jsgrid-header-sort-asc"
      style="width: 197px; position: relative; height: 10px;">
      <div class="resizer"></div>line
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>
      <th id="network" class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable"
      style="width: 80px; position: relative;">
      <div class="resizer"></div>Network
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>
      <th id="type" class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable"
      style="width: 80px; position: relative;">
      <div class="resizer"></div>Type
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>
      <th id="incrementPhaseRelease" class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable"
      style="width: 80px; position: relative;">
      <div class="resizer"></div>Phase
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>
      <th id="environment" class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable"
      style="width: 80px; position: relative;">
      <div class="resizer"></div>Environment
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>
      <th id="serviceManagerType" class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable"
      style="width: 80px; position: relative;">
      <div class="resizer"></div>SM Type
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>
      <th id="serviceManagerSubType" class="jsgrid-header-cell jsgrid-align-left jsgrid-header-sortable ui-resizable"
      style="width: 80px; position: relative;">
      <div class="resizer"></div>SM Sub-Type
      <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
      <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></th>          
    </tr>
    <tr class="jsgrid-filter-row" style="display: none;">
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>          
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;"></td>
    </tr>
    <tr class="jsgrid-insert-row" style="display: none;">
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>
      <td class="jsgrid-cell jsgrid-align-left" style="width: 80px;">
        <input type="text" id="bob" />
      </td>          
    </tr>
  </tbody>
</table>

为了实现这一点，我需要添加什么才能仅将列1-xx和而不是移动到标题？