Question

我有一张桌子和一些div。当我调整div的宽度时，div是bedraggle它在文本框中显示的宽度这是我的代码

＆＃13;

$(function() {
    var container = $('#container'),
    base = null,
    handle = $('.handle'),
    isResizing = false,
    screenarea = screen.width;
    handle.on('mousedown', function(e) {
        base = $(this).closest(".timescalebase");
        isResizing = true;
        lastDownX = e.clientX;
    });

    $(document).on('mousemove', function(e) {
        // we don't want to do anything if we aren't resizing.
        if (!isResizing)
            return;
        var k = $('#' + base[0].id + '_start').val(),
            p = (e.clientX - base.offset().left),
            q = parseInt((p / screenarea) * p);

        base.css('width', p);
        $('#' + base[0].id + '_value').val(q + parseInt(k));
    }).on('mouseup', function(e) {
        // stop resizing
       isResizing = false;
    });
});

＆＃13;

.editableTable {
    position:static;
    width:100%; 
    border-collapse:collapse;
} 
.editableTable td { 
    border: 1px solid;
    border-color: lightgray;
    overflow:hidden;
    height:17px;
    /*max-height:10px;*/
 }
 .editableTable th {
     border: 1px solid;
     border-color: lightgray;
     height: 17px;
     overflow: hidden;
 }
 .activelevel1 {
     background-color: #EA623E;
 }
 .timescalebase {
     margin-top: 13px;
     height: 7px;
     position: relative;
     width:100px;
     height:7px;
  }
  .handle {
     position: absolute;
     right:0;
     top: 0;
     bottom: 0;
     width: 8px;
     cursor: w-resize;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div style="margin-left:100px;">
        <div id="container" style="width:100%;margin-top:10px;">
            <div id="timebase1" class="timescalebase activelevel1">
                <div class="handle"></div>
            </div>
            <div id="timebase2" class="timescalebase activelevel1">
                <div class="handle"></div>
            </div>
        </div>
        <div id="container">
            <table class="editableTable">
                <tr>
                    <td>0</td>
                    <td>30</td>
                    <td>60</td>
                    <td>90</td>
                </tr>
            </table>
        </div>
    </div>  
    <div style="margin-top:100px;">
        start1 <input id="timebase1_start" type="text" name="number" value="0" min="1" class="usereditingsub1">
        stop 1<input id="timebase1_value" type="text" name="number" value="0" min="1" class="usereditingsub1">
        start2 <input id="timebase2_start" type="text" name="number" value="0" min="1" class="usereditingsub1">
        stop 2<input id="timebase2_value" type="text" name="number" value="0" min="1" class="usereditingsub1">
    </div>

＆＃13;

我的要求是当我调整div的大小时，文本框中显示的宽度必须与表值匹配表示当我将宽度调整为30或60或90（表值）时，文本框的值与该值相同（表示如果div宽度达到表值30，则文本框值必须显示为30

Demo jsfiddle here

jq-可调整大小的div宽度与表数据

0 个答案: