JSP中要求某行最多显示10个字符，点击后显示所有字符

  今天写页面的时候要求备注行最多只能显示10个字符，超出10个点击才能在模态框显示全部，且可以编辑

模态框部分

<!-- 模态框（Modal）- 编辑 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
            <div class="modal-dialog" >
            <div class="modal-content">
                <div class="modal-header" style="border-bottom: 0;padding-bottom: 0">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h3 class="modal-title center" id="myeditModal" ></h3>
                    <h5 class="modal-title center" style="margin-top:10px"></h5>
                </div>
           
                  <div class="modal-body">
                       <input type="hidden" name="resource_num" id="resource_num" />
                       
                       <div class="form-group">                       
                        <div class="" style="height:100px">                           
                         <textarea type="text" maxlength="150" class="form-control" name="new_beizhu" id="new_beizhu" placeholder="请输入备注内容"/ style="height:100px;resize: none;"> </textarea>
                         <p class="text-right">还可以输入<span class="sfont-color">150</span>字</p>                  
                       </div>                   
                       </div>
                  </div>   
                
                <div class="modal-footer">
                    <button data-bb-handler="success" type="button" class="btn btn-sm btn-primary" οnclick="confirm()"><i class="icon-ok"></i> 确定</button>
                    <button data-bb-handler="cancel" type="button" class="btn btn-sm btn-danger" οnclick="cancel();"><i class="icon-info"></i> 取消</button>
                </div>
               </div>
           
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->

备注字段

<td class='center'>

                                                    <a class="" id="beizhu_show${vs.index+1}"  οnclick="edit('${vs.index+1}','beizhu');">
                                                        <c:if test="${fn:length(var.beizhu)>10 }">  
                                                             ${fn:substring(var.beizhu, 0, 9)}...  
                                                           </c:if>  
                                                          <c:if test="${fn:length(var.beizhu)<=10 }">  
                                                             ${var.beizhu }  
                                                           </c:if>   
                                                       </a>
        

                                            </td>

js代码

        function edit(num,resource){
            
            $('#resource_num').val(num);
            $('#new_beizhu').val($('#beizhu'+num).text());
             var $js_num = $('#new_beizhu').val().length
            $('#new_beizhu').next().children("span").text(150-$js_num)
            $('#editModal').modal('show');
            if(resource == "beizhu"){
                $("#myeditModal").text('备注').next("h5").text("")
            }else if(resource == "wancheng"){
                resource='完成'
                $("#myeditModal").text('完成').next("h5").text("是否完成当前任务")
            }
        }
        
        
        //点击完成功能  ajax方法
        function confirm(){            
                 $.ajax({
                     type:"POST",    
                     url:"<%=basePath%>warn/editAjax.do",
                     dataType:"json",
                     data:{
                         warn_id:$('#warn'+$('#resource_num').val()).text(),
                         beizhu:$('#new_beizhu').val(),
                         status_flag:$('#status_flag'+$('#resource_num').val()).text(),
                     },
                     success:function(data){
                         if(true===data.flag){
                            
                               //此处前台更新备注及状态
                               var new_beizhu=$('#new_beizhu').val();
                               var beizhu_show;
                            $('#editModal').modal('hide');
                            $('#wancheng'+$('#resource_num').val()).remove();
                            $('#beizhu'+$('#resource_num').val()).text(new_beizhu);
                            
                            if(new_beizhu.length>10){
                                beizhu_show=new_beizhu.substr(0,9)+'...';
                            }else{
                                beizhu_show=new_beizhu;
                            }
                            $('#beizhu_show'+$('#resource_num').val()).text(beizhu_show);
                            
                            $('#modify_username'+$('#resource_num').val()).text(data.modify_username);
                            $('#new_beizhu').val('');
                            if($('#status_flag'+$('#resource_num').val()).text()==0){
                                $('#status_flag'+$('#resource_num').val()).text(1);
                            }
                             return;
                         }else{
                             alert("完成事件失败，请联系管理员！");
                             $('#editModal').modal('hide');
                             $('#new_beizhu').val('');
                             return;
                         }
                     },
                     error:function(){
                         alert("服务器故障——完成事件错误！");
                         $('#editModal').modal('hide');
                        $('#new_beizhu').val('');
                     },
                 });
                 
            
        }
        
        function cancel(){
            $('#editModal').modal('hide');
            $('#new_beizhu').val('');
        }