如何用input的输入值来控制textarea的宽度

qq_15591383 2018-05-23 10:04:07
有这样一个需求,一个表格有6列,2行(主要为了方便布局),第一行的每一列里有一个input文本框,限制只能输入数字,并且这6个文本框输入的数字之和必须等于100,第二行每一列是一个texterea,问题的关键就在这里了,要求每一列的texterea的宽度随它上边那一行的input输入值的变化而变化,举例来说,第一行第一列的input输入值为为20的话,实际表示的是20%,那么第一行第二列那个texterea的宽度就要占整个表格宽度的20%(如果texterea的宽度占该列宽度的100%的话,是不是这样问题就变成了input输入值的宽度来决定了该列的宽度,因为texterea的宽度能自动随列的宽度变化而变化的话。)
<table class="w3-table w3-light-grey w3-bordered w3-border">
<tr>
<td><input type="text" class="form-control" id="a1" placeholder="输入比例"></td>
<td><input type="text" class="form-control" id="a2" placeholder="输入比例"></td>
<td><input type="text" class="form-control" id="a3" placeholder="输入比例"></td>
<td><input type="text" class="form-control" id="a4" placeholder="输入比例"></td>
<td><input type="text" class="form-control" id="a5" placeholder="输入比例"></td>
<td><input type="text" class="form-control" id="a6" placeholder="输入比例"></td>
</tr>
<tr>
<td><textarea class="form-control" rows="5" id="b1" placeholder="项目描述"></textarea></td>
<td><textarea class="form-control" rows="5" id="b2" placeholder="项目描述"></textarea></td>
<td><textarea class="form-control" rows="5" id="b3" placeholder="项目描述"></textarea></td>
<td><textarea class="form-control" rows="5" id="b4" placeholder="项目描述"></textarea></td>
<td><textarea class="form-control" rows="5" id="b5" placeholder="项目描述"></textarea></td>
<td><textarea class="form-control" rows="5" id="b6" placeholder="项目描述"></textarea></td>
</tr>
</table>
...全文
1128 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
functionsub 2018-05-23
  • 打赏
  • 举报
回复
$('input').keyup(function(){
    var val = this.value;
    val = parseInt(val);
    if(!isNaN(val)){
        $(this).parent().css('width' , val + '%');
    }else{
        $(this).parent().css('width' , 'auto');
    }
})

87,888

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧