Directorio de artículos

1. Proponer tareas
2. Completa la tarea

Ahora los datos populares están separados de la vista, al igual que la propiedad de texto del control en el archivo de diseño en el desarrollo de Android, no se recomienda usar datos codificados, sino usar strings.xmlla variable de cadena definida en el archivo de recursos de cadena.

1. Proponer tareas

Escriba el código para mostrar la siguiente tabla

2. Completa la tarea

Para mostrar una tabla en la página web, los datos se pueden escribir en la celda de la tabla, o la tabla se puede separar de los datos, y los datos se pueden configurar mediante un script.

(1) Use el DOM para establecer datos para la tabla

crear test01.htmlarchivo

<!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>

Abrir en el navegador predeterminado

(2) Use jQuery para establecer datos para la tabla

crear test02.htmlarchivo

<!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>

abierta en el navegador
Usar DOM y jQuery para establecer datos para la tabla es esencialmente lo mismo. Obtiene cada elemento de la página y luego establece el valor del atributo para cada elemento. Los datos se dispersan y no se empaquetan en una colección de datos, como json, mientras que Vue The La forma de usarlo es empaquetar la forma de proporcionar datos.

(3) Use Vue para establecer datos para la tabla

crear test03.htmlarchivo
Las constantes de Vue Studentproporcionan una función de datos () que devuelve datos JSON, un conjunto empaquetado de datos de pares clave-valor
Vue crea una instancia o aplicación de Vue basada en constantes Student, llama a la función mount(), vincula el elemento de la página y luego { {key}}los datos JSON devueltos por la función data() se pueden obtener en el elemento de la página.

<!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>

abierta en el navegador

Notas de estudio preliminares: varias formas de establecer datos para tablas

Directorio de artículos

1. Proponer tareas

2. Completa la tarea

(1) Use el DOM para establecer datos para la tabla

(2) Use jQuery para establecer datos para la tabla

(3) Use Vue para establecer datos para la tabla

Supongo que te gusta