今天遇到個小問題，在MVC4中，有個字段的長度太長，把頁面撐得很難看，所以寫個JS讓它變成加成顯示，在長度超過10的時候，就顯示‘......’，鼠標移上去就會顯示全部內容。

假設有一張表，存了ID和Reason兩個字段，在頁面把它取出來

<table?>
????? <thead>
??????????<tr>
?????????????<th>賬號</th>
?????????????<th>原因</th>

??????????</tr>
????? </thead>

?@if (!Model.IsQueryResultEmpty)
??????????????? {
??????????????????? foreach (var item in Model.Result.Items)
??????????????????? {
??????????????????? <tbody>
??????????????????????? <tr>

?????????????????????????? <td>@item.ID</td>

?????????????????????????? <td>@if (item.Reason != null && item.Reason.Length > 10)
??????????????????????????????????? {
??????????????????????????????????????? <div class="td-wp">
??????????????????????????????????????????? <span ?<span class="show_reason">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.......&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>????????????????
??????????????????????????????????????????? <div class="pshow_box" style="display: none;width: 120px;text-align: left;"> <span????? class="tip-bg"></span>???????????????????????????????????????
???????????????????????????????????????????? @Html.Raw(item.Reason)
??????????????????????????????????????????? </div>
??????????????????????????????????????? </div>
??????????????????????????????????? }
??????????????????????????????????? else
??????????????????????????????????? {
??????????????????????????????????????? @item.Reason
??????????????????????????????????? }
??????????????????????????? </td>

?</tbody> ??????????????????

? } ???????

???????? } ??????????

????? else?????????????

??? { ?????????????

?????? <tbody> ??????

????????????????? <tr> ????????

??????????????????? <td colspan="2" style="text-align: left">沒有查詢到相關數據</td> ????

??????????????????? </tr> ?????????????????

?? </tbody> ???????????

???? }

??????????? </table>

<script type="text/javascript"> ?

?? $(function () {

??????? /* 顯示/隱藏禁用原因*/ ??????

? var $show_reason = $(".show_reason"); ?????

?? $show_reason.hover( ??????????

? function () { ???????????????

$(this).parent().find(".pshow_box").show(); ???????????

}, ???????????

function () { ???????????????

$(this).parent().find(".pshow_box").hide(); ???????????

} ???????

); ?????? ???

})

</script>

轉載于:https://www.cnblogs.com/qianyindichang/p/3477434.html

總結

以上是生活随笔為你收集整理的JS加成显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。