테이블 td 셀의 크기를 조정하기 위한 드래그의 JQuery 구현: 실제 적용에서는 td 셀의 크기를 조정해야 할 수도 있습니다. 관찰하기 쉽기 때문일 수도 있고, 다른 이유 때문일 수도 있습니다. 어쨌든 이 기능을 실현할 수 있는 코드를 공유해 보겠습니다. 코드 예시는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. 脚本之家 <br> 테이블 {<br> border-collapse: 축소;<br> }<br> td {<br> 텍스트 정렬: 중앙;<br> }<br> </스타일><br> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><br> <script type="text/javascript"><br> (함수($){<br> $.fn.tableresize = 함수() {<br> var _document = $("body");<br> $(this).each(함수 () {<br> if (!$.tableresize) {<br> $.tableresize = {};<br> }<br> var _table = $(this);<br> //결정ID<br> var id = _table.attr("id") || "tableresize_" (Math.random() * 100000).toFixed(0).toString();<br> var tr = _table.find("tr").first(), ths = tr.children(), _firstth = ths.first();<br> //정정临时变weight存放对象<br> var cobjs = $.tableresize[id] = {};<br> cobjs._currentObj = null, cobjs._currentLeft = null;<br> ths.mousemove(함수 (e) {<br> var _this = $(this);<br> var left = _this.offset().left, <br> top = _this.offset().top, <br> 너비 = _this.width(), <br> 높이 = _this.height(), <br> 오른쪽 = 왼쪽 너비, <br> 하단 = 상단 높이, <br> clientX = e.clientX, <br> clientY = e.clientY;<br> var leftside = !_firstth.is(_this) && Math.abs(left - clientX) <= 5, <br /> rightside = Math.abs(right - clientX) <= 5;<br /> if (cobjs._currentLeft||clientY>top&&clientY<bottom&&(leftside||rightside)){<br /> _document.css("cursor", "e-resize");<br /> if (!cobjs._currentLeft) {<br /> if (왼쪽) {<br /> cobjs._currentObj = _this.prev();<br /> }<br /> 그렇지 않으면 {<br /> cobjs._currentObj = _this;<br /> }<br /> }<br /> }<br /> 그렇지 않으면 {<br /> cobjs._currentObj = null;<br /> }<br /> });<br /> ths.mouseout(함수 (e) {<br /> if (!cobjs._currentLeft) {<br /> cobjs._currentObj = null;<br /> _document.css("커서", "자동");<br /> }<br /> });<br /> _document.mousedown(함수 (e) {<br /> if (cobjs._currentObj) {<br /> cobjs._currentLeft = e.clientX;<br /> }<br /> 그렇지 않으면 {<br /> cobjs._currentLeft = null;<br /> }<br /> });<br /> _document.mouseup(함수 (e) {<br /> if (cobjs._currentLeft) {<br /> cobjs._currentObj.width(cobjs._currentObj.width() (e.clientX - cobjs._currentLeft));<br /> }<br /> cobjs._currentObj = null;<br /> cobjs._currentLeft = null;<br /> _document.css("커서", "자동");<br /> });<br /> });<br /> };<br /> })(jQuery); <br /> <br /> $(문서).ready(함수 () {<br /> $("테이블").tableresize();<br /> });<br /> </script><br /> </머리><br> <br> <tablecellspacing="0" border="1" rule="all"><br> <본체><br> <tr><br> <td style="width:200px;">ID</td><br> <td style="width:200px;">이름</td><br> <td style="width:200px;">年纪</td><br> <td style="width:200px;">地址</td><br> <td style="width:200px;">电话</td><br> </tr><br> <tr><br> <td>22</td><br> <td>이름:44</td><br> <td>나이:23</td><br> <td>주소:47</td><br> <td>전화:15</td><br> </tr><br> <tr><br> <td>28</td><br> <td>이름:42</td><br> <td>나이:68</td><br> <td>주소:30</td><br> <td>전화번호:50</td><br> </tr><br> <tr><br> <td>29</td><br> <td>이름:63</td><br> <td>나이:48</td><br> <td>주소:90</td><br> <td>전화번호:76</td><br> </tr><br> </본체><br> </테이블><br> </본문><br> </div>
