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

[qq_15591383]

有这样一个需求，一个表格有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>

[functionsub]

$('input').keyup(function(){
    var val = this.value;
    val = parseInt(val);
    if(!isNaN(val)){
        $(this).parent().css('width' , val + '%');
    }else{
        $(this).parent().css('width' , 'auto');
    }
})