Article directory

1. To propose tasks
2. Complete the task

Now the popular data is separated from the view, just like the text attribute of the control in the layout file in Android development, it is not recommended to use hard-coded data, but to use strings.xmlthe string variable defined in the string resource file.

1. To propose tasks

Write the code to display the following table

2. Complete the task

To display a table on the web page, the data can be written in the table cell, or the table can be separated from the data, and the data can be set by script.

(1) Use the DOM to set data for the table

create test01.htmlfile

<!DOCTYPE html>
<html>

<head>
    <title>test01</title>    
</head>

<body>
    <div id='student'>
        <table border='1' cellpadding='5'>
            <tr>
                <td>学号</td>
                <td id="id"></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td id="name"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td id="gender"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td id="age"></td>
            </tr>      
            <tr>
                <td>专业</td>
                <td id="major"></td>
            </tr>
            <tr>
                <td>电话</td>
                <td id="telephone"></td>
            </tr>     
        </table>
    </div>
    <script>
        document.querySelector('#id').innerText = '20220101';
        document.querySelector('#name').innerText = '萌萌哒';
        document.querySelector('#gender').innerText = '男';
        document.querySelector('#age').innerText = '20';
        document.querySelector('#major').innerText = '大数据技术';
        document.querySelector('#telephone').innerText = '13934345678';
    </script>
</body>
</html>

Open in default browser

(2) Use jQuery to set data for the table

create test02.htmlfile

<!DOCTYPE html>
<html>

<head>
    <title>test02</title>
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
</head>

<body>
    <div id='student'>
        <table border='1' cellpadding='5'>
            <tr>
                <td>学号</td>
                <td id="id"></td>
            </tr>
            <tr>
                <td>姓名</td>
                <td id="name"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td id="gender"></td>
            </tr>
            <tr>
                <td>年龄</td>
                <td id="age"></td>
            </tr>      
            <tr>
                <td>专业</td>
                <td id="major"></td>
            </tr>
            <tr>
                <td>电话</td>
                <td id="telephone"></td>
            </tr>     
        </table>
    </div>
    <script>
        $('#id').html('20220101');
        $('#name').html('萌萌哒');
        $('#gender').html('男');
        $('#age').html('20');
        $('#major').html('大数据技术');
        $('#telephone').html('13934345678');
    </script>
</body>
</html>

open in browser
Using DOM and jQuery to set data for the table is essentially the same. It gets each page element, and then sets the attribute value for each element. The data is scattered and not packaged into a data collection, such as json, while Vue The way to use it is to package the way to provide data.

(3) Use Vue to set data for the table

create test03.htmlfile
Vue constants Studentprovide a data() function that returns JSON data - a packaged set of key-value pair data
Vue creates a Vue instance or application based on constants Student, calls the mount() function, binds the page element, and then { {key}}the JSON data returned by the data() function can be obtained in the page element.

<!DOCTYPE html>
<html>

<head>
    <title>test03</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id='student'>
        <table border='1' cellpadding='5'>
            <tr>
                <td>学号</td>
                <td>{
   
   { id }}</td>
            </tr>
            <tr>
                <td>姓名</td>
                <td>{
   
   { name }}</td>
            </tr>
            <tr>
                <td>性别</td>
                <td>{
   
   { gender }}</td>
            </tr>
            <tr>
                <td>年龄</td>
                <td>{
   
   { age }}</td>
            </tr>
            <tr>
                <td>专业</td>
                <td>{
   
   { major }}</td>
            </tr>
            <tr>
                <td>电话</td>
                <td>{
   
   { telephone }}</td>
            </tr>
        </table>
    </div>
    <script>
        const Student = {
      
      
            data() {
      
      
                return {
      
      
                    id: 20220101,
                    name: '萌萌哒',
                    gender: '男',
                    age: 20,
                    major: '大数据技术',
                    telephone: '13934345678'
                }
            }
        }

        Vue.createApp(Student).mount('#student')
    </script>
</body>
</html>

open in browser

Front-end study notes: several ways to set data for tables

Article directory

1. To propose tasks

2. Complete the task

(1) Use the DOM to set data for the table

(2) Use jQuery to set data for the table

(3) Use Vue to set data for the table

Guess you like