Javascript

2023.01.25

연을 2023. 1. 25. 17:11
728x90

<스네이크 코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    td{
        width: 40px;height: 40px;text-align: center;
    }
</style>
<body>
<table id="tblData" border="1">
<tr>
    <td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
    <td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
    <td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
    <td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
    <td></td><td></td><td></td><td></td><td></td>
</tr>
</table><br>
<button id="btnStart">Start</button>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    $(document)
    .on('click','#btnStart',function(){
        num=1;
        for(i=0;i<$('#tblData tr').length; i++){
            if(i%2==0){
                for(j=0; j<$('#tblData tr:eq(0) td').length; j++){
                    $('#tblData tr:eq('+i+') td:eq('+j+')').text(num++);
                }
            } else{
                for(j=$('#tblData tr:eq(0) td').length-1; j>=0; j--){
                    $('#tblData tr:eq('+i+') td:eq('+j+')').text(num++);
                }
            }
        }
    })
</script>
</html>

<결과>

첫 화면 버튼 클릭후
$('#tblData tr').length = 5
$('#tblData tr:eq(0) td').length = 5

for(j=$('#tblData tr:eq(0) td').lenght-1;j>=0;j--;){
     $('#tblData tr:eq('+i+') td:eq('+j+')').text(num++);
}

<누르면 숫자가 나오는 코드>

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    td{
        width: 40px;height: 40px;text-align: center;
    }
</style>
<body>
    <table id="tblData" border="1">
        <tr>
            <td></td><td></td><td></td><td></td>
        </tr>
        <tr>
            <td></td><td></td><td></td><td></td>
        </tr>
        <tr>
            <td></td><td></td><td></td><td></td>
        </tr>
        <tr>
            <td></td><td></td><td></td><td></td>
        </tr>
    </table>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    let num=1;
    $("#tblData")
    .on('click','td',function(){
        if($(this).text()==''){
            $(this).text(num++);
        }
    })
</script>
</html>

<결과>

무작위로 눌러서 실행해봤다.

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;height: 100px;background-color: aliceblue;
    }
    td{
        width: 40px;height: 40px;border: 1px solid lightblue;
    }
    table{
        border-collapse: collapse;
    }
</style>
<body>
    <div>
    </div><br>
    <table>
        <tr><td></td></tr>
    </table><br>
    <div>
    </div><br>
    <button id="btnBefore">Before</button>
    <button id="btnAfter">Atter</button>
    <button id="btnPrepend">Prepend</button>
    <button id="btnAppend">Append</button>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    $(document)
    .on('click','#btnBefore',function(){ //태그 바깥 앞
        $('table').before('<p>Hello World<p>');
    })
    .on('click','#btnAfter',function(){ //태그 바깥 뒤
        $('table').after('<p>Good Morning Vietnam<p>');
    })
    .on('click','#btnPrepend',function(){ //태그 안 앞
        $('table').prepend('<tr><td>1</td><td>2</td><td>3</td></tr>');
    })
    .on('click','#btnAppend',function(){ //태그 안 뒤
        $('table').after('<tr><td>4</td><td>5</td><td>6</td></tr>');
    })
</script>
</html>

<결과>

첫화면 before 버튼 after 버튼 prepend 버튼 append 버튼

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        border-collapse: collapse; 
    }
    td{
        border: 1px solid lightpink; text-align: center; width: 100px; height: 40px;
    }
</style>
<body>
    <label style="color: brown;">이름 : </label><input type="text" id="name" size="22px" align="'center"><br>
    <label style="color: brown;">모바일 : </label><input type="text" id="mobile"><br>
    <button id="btnInput" style="background-color: brown; color:bisque; border: brown;">추가</button>
    <hr>
    <table>
        <tr><td>이름</td><td>전화번호</td></tr>
    </table>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    $(document)
    .on('click','#btnInput',function(){
        //name, mobile에 입력된 내용을 table 하단에 추가
        $('table').append('<tr><td>'+$('#name').val()+'</td><td>'+$('#mobile').val()+'</td></tr>'+'<br>');
        //name,mobile을 비운다
        $('#name').val('');
        $('#mobile').val('');
    })
</script>
</html>

<결과>

첫화면 이름과 모바일 쓰고 버튼클릭시

<코드>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    table{
        border-collapse: collapse; 
    }
    td{
        border: 1px solid lightpink; text-align: center; width: 100px; height: 40px;
        color : rgb(226, 71, 97);
    }
    button{
        background-color: brown; color:bisque; border: brown;
    }
</style>
<body>
    <button id="btnStart">Start</button>
    <button id="btnremove">Remove</button>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script>
    $(document)
    .on('click','#btnStart',function(){
        let m = parseInt(prompt('행 갯수를 입력하시오'));
        let n = parseInt(prompt('열 갯수를 입력하시오'));
        //행*열 크기의 테이블을 만든다.(rendering table)
        $(this).before('<table id=tblData></table><br>');

        let str='';
        for(i=0;i<n;i++){
            str+='<td></td>';
        }
        let str1='';
        for(i=0;i<m;i++){
            str1+='<tr>'+str+'</tr>';
        }

        // let tdstr='';
        // for(j=0;j<m;j++){
        //     tdstr +='<tr>';
        //     for(i=0;i<n;i++){
        //         tdstr +='<td></td>';
        //     }
        //     tdstr +='</tr>';
        // }
        $('#tblData').append(str1);
        num=1;
        for(i=0;i<$('#tblData tr').length; i++){
            if(i%2==0){
                for(j=0; j<$('#tblData tr:eq(0) td').length; j++){
                    $('#tblData tr:eq('+i+') td:eq('+j+')').text(num++);
                }
            } else{
                for(j=$('#tblData tr:eq(0) td').length-1; j>=0; j--){
                    $('#tblData tr:eq('+i+') td:eq('+j+')').text(num++);
                }
            }
        }
        $('#tblData tr:even').css({'background-color':'lightyellow'});
        
    })
    .on('click','#btnremove',function(){
        $('#tblData').remove();
    })
    

</script>
</html>

<결과>

첫화면 strat 누르면 결과 remove : 사라진다

나는 똥멍청이야...

 

728x90