JSP的四种数据修改方式

最近接触了一个老项目，用的是JSP，于是有了这个随笔。。。

一、最常见的document方式

省略其中具体内容，给出样例代码：


<html>
<style>
    .table a:hover{
        color: #337ab7;
        text-decoration: underline;
    }
</style>
<div>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        </tbody>
    </table>
</div>
</html>

二、JQuery方式

这个方式巨麻烦，不知道为什么要用

<div>
    <table class="table table-hover" id="myTable">
        <thead>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td id="myTd">2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        </tbody>
    </table>
    <button id="bt2">button2</button>
</div>
<script>
    $(function(){
        $("#bt2").click(function(){
            const val = parseInt($("#myTd").text().trim())
            $("#myTd").text(val+1)
        })
    })
</script>

很容易可以看出，这个方法不好用，先使用$()装饰function，然后选取按钮元素，绑定点击事件，然后获取myTd元素的text，转化为int，然后计算，最后才能装入元素

三、Angular方式

只用一次的话，巨麻烦，但是如果一个页面要使用好多的响应式，兴许会方便一些？

一共5步：

  1. 先在html标签处声明app
  2. 在容器绑定ng-controller声明controller
  3. 响应数据倒是和vue的格式一致
  4. 按钮声明ng-click绑定事件
  5. 然后在js之中声明对应的东西

<html ng-app="myApp">
<style>
    .table a:hover{
        color: #337ab7;
        text-decoration: underline;
    }
</style>
<div ng-controller="myController">
    <table class="table table-hover" id="myTable">
        <thead>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td id="myTd">{{ data.value }}</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        </tbody>
    </table>
    <button id="bt2" ng-click="inc()">button2</button>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function($scope){
        $scope.data = {
            value: 2
        };
        $scope.inc = function(){
            $scope.data.value += 1;
        };
    });
</script>
</html>

四、vue方式

真是神中神吧

<div>
    <table class="table table-hover" id="myTable">
        <tbody>
        <tr>
            <td>{{ count }}</td>
            <td>2</td>
            <td>2</td>
        </tr>
        </tbody>
    </table>
    <button onclick="cl()">buttton</button>
</div>
<script>
    var app = new Vue({el:'#myTable',data:{
        count: 1
        }})
    function cl(){
        app.count ++;
    }
</script>

在这里不难看出，我们在声明一个响应式的变量时，需要选择一个等级较高的标签作为父标签，然后才能声明在这个父标签中，使用声明的响应式变量。

posted @ 2025-11-27 16:49  报废之人  阅读(1)  评论(0)    收藏  举报