標籤:jquery 動態 讓 input 跟著 td 寬度 增長 js檔案
<html>
<head>
<script type="text/javascript" src="admin/js/jquery.min.js"></script>
<body>
<table id="c1" width="98%" border="1px" cellspacing="0" cellpadding="0" >
<tr>
<td><input name="t1" value="aa1" /></td>
<td id="c2">2</td>
<td>3</td>
</tr>
<tr>
<td><input class="test1" id="test1" border="1px" onkeypress="demo1()" type="text" /></td>
<td><input class="test1" id="test2" onkeypress="demo1()" type="text" /></td>
<td><input class="test1" id="test3" onkeypress="demo1()" type="text" /></td>
</tr>
<tr>
<td>dd</td>
<td>dd</td>
<td>dd</td>
</tr>
<tr>
<td>dd</td>
<td>dd</td>
<td>dd</td>
</tr>
</table>
</body>
<script>
//jQuery代碼
function demo1() {
//var dd = document.getElementsByName(‘t1‘)[0].value;//通過名字,得到input中值,遍曆是從0開始的
//var testLength = document.getElementById(‘test1‘).value.length;
var testLength = document.getElementById("c1").rows[0].cells[0].offsetWidth; //表格中id,table中第一行 第一列
alert("寬度為:" + testLength);
$(‘.test1‘).css(‘width‘, testLength*5 + ‘px‘)//點表類,#表id 動態設定input框長度
}
</script>
</html>
本文出自 “Exist” 部落格,請務必保留此出處http://exist.blog.51cto.com/10305882/1956238
JQuery 動態 讓 input 跟著 td 寬度 增長 js檔案