个人中心
gpt4 book ai didi

javascript - 对齐表格中的元素

转载 作者：行者123 更新时间：2023-11-28 05:39:35 31 4
gpt4 key购买 nike

我制作了一个“待列表”，其中有两个在侧面动画的图标。右侧的图标不在表中。因此，在制作动画时，您可以看到它移动到 table 之外。我不明白为什么？有什么帮助吗？谢谢!

嗨，这是 fiddle :

https://jsfiddle.net/rggo2tmv/

正如您所看到的，垃圾箱图标消失在表格内，而另一个图标(右侧)继续出现在表格外。

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>To-Do List Project</title>
    <!-- local css file sheet-->
    <link rel="stylesheet" type="text/css" href="assets\css\todo.css">
        <!-- Local JQuery js file-->
    <script type ="text/javascript" src="assets/js/lib/jquery-3.1.0.min.js"></script>

    <!-- googel fonts -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>

    <!-- howel sounds -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.core.min.js"></script>

    <!-- Paper -->
    <script type="text/javascript" src="papaer\dist\paper-full.js"></script>

    <script type="text/paperscript" canvas="myCanvas">

<!--  two numbers are placing, last number is a radious-->

    var circles = [];
    var colors = ['blue', 'red', 'orange', 'purple'];

<!--    //DEFINING AN OBJECT -->
    var keyData = {
    a: {
        color: 'purple',

    }, 

    b: {
        color: 'green',

    }, 

    c: {
        color: 'yellow',

    },

    d: {
        color: 'orange',

    },

    e: {
        color: 'NavajoWhite',

    },

    f: {
        color: 'yellow',

    },

    g: {
        color: 'orange',

    },

    h: {
        color: 'grey',

    },

    i: {
        color: 'SpringGreen',

    },

    j: {
        color: 'black',

    },

    k: {
        color: 'white',

    },

    l: {
        color: 'darkgrey',

    },

    m: {
        color: 'darkblue',

    },

    n: {
        color: 'darkblue',

    },

    o: {
        color: 'yellow',

    },

    p: {
        color: 'cyan',

    },


    q: {
        color: 'Maroon',

    },


    r: {
        color: 'Red',

    },


    s: {
        color: 'pink',

    },

    t: {
        color: 'Salmon',

    },

    u: {
        color: 'cyan',

    },

    v: {
        color: 'FireBrick',

    },

    w: {
        color: 'Tan',

    },

    x: {
        color: 'Brown',

    },

    y: {
        color: 'Olive',

    },

    z: {
        color: 'YellowGreen',

    },


};//closes keyData





   function onKeyDown(event) {

       if(keyData[event.key]){ //if key is defined

       keyData[event.key].color;

       <!-- will calc the max size of visible canvas-->
       var maxPoint = new Point(view.size.width, view.size.height);
        <!-- random is between 0 and 0.99 -->
       var randomPoint = Point.random();
        <!-- so multiplying max and a random decimal nmber will give us random locaiton inside the canvas -->
       var point = maxPoint * randomPoint;

       var newCircle = new Path.Circle(point, 200);
       newCircle.fillColor = keyData[event.key].color;

       <!-- adds the circle to the array -->
        circles.push(newCircle);
       }//if

};



    function onFrame(event) {
    <!--    // Each frame, change the fill color of the path slightly by
        // adding 1 to its hue: -->
        for(var i = 0; i<circles.length; i++){
            circles[i].fillColor.hue += 1;
            circles[i].scale(.955);
        };

}; 


</script>
</head>

<body>

<div id="container">
    <h1>To-Do List <button <i class="fa fa-plus" aria-hidden="true"></i> </button></h1>

    <input type="text" placeholder="Add New To-Do">

<!-- span is the button and its inside the li which contains the text -->
<!-- added table to each so they won't all aniamte toghther -->


        <table>
        <tr> 
            <td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>

            <td colspan="2">Hello There</td>

            <td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
        </tr>
        </table>

        <table>
        <tr>
            <td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>

            <td colspan="2">Hello There</td>

            <td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>
        </tr>
        </table>

        <table>
        <tr>

            <td><span class="spanLeft"><i class="fa fa-trash"></i></span></td>

            <td colspan="2">Hello There</td>

            <td><span class="spanRight"><i class="fa fa-check-square-o"></i></span></td>


        </tr>
        </table>

</div>


<canvas id="myCanvas" resize></canvas>
<!-- Javascript -->

<!-- //icons -->
<script src="https://use.fontawesome.com/9430f1a1cb.js"></script>
<!-- local javascript -->
<script type="text/javascript" src="assets/js/todo.js"></script>

</body>
</html>

Javascript:

///// check-off and remove spicific to-do by clicking or restore it to not-done-yet

//will add/remove class "completed" - grey and line-through
$("div").on("click", "span.spanRight", function(){
    $(this).parent().parent().toggleClass("completed"); //if class exists will remove and the opposite according to aprent from span.spanRight

});



var sound = new Howl({
  src: ['https://raw.githubusercontent.com/jonobr1/Neuronal-Synchrony/master/assets/A/clay.mp3']
});

//click on delete button to remove to-do 
$("div").on("click", "span.spanLeft", function(){
    //will remove the to-do, which its li is the parent element of the span
    $(this).parent().parent().fadeOut(500, function() //this here refers to the span, but now because of parent()
        //fadeOut will not remove only hide element, so we add remove()
        {$(this).remove();}); //this refers to the parent

        event.stopPropagation(); //will stop the toggle to "completed" class
});

/////creation of new to-do
//event on key press. When we click "enter" it will add the new to-do (input)
$("input[type='text'").keypress(function(){ //only if input is 'text' it will select the input
    if (event.which === 13){//if "enter" is clicked in input field
        //grabbing text from input
        var todoText = $(this).val(); //takes value that inside input
        //create a new li and add to ul

        if( todoText!== ''){

            $("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +

        "<td colspan='2'>" +  todoText + "</td>" +

        "<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
        "</tr></table>");
        $("input").val('');

        sound.play();

        }

    }



});

/////Add button
// selecting the icon


$(".fa-plus").on("click", function() {    


  if ( $("input").val() === "") {
     // empty
     $("input").focus();
  } else { //make it do enter key /simulate an enter key, sends the input value and clears the input field (and value)
        var press = jQuery.Event("keypress");
        press.ctrlKey = false;
        press.which = 13;
        $("input").trigger(press);

        //wil ladd input value to feild
        $("div").append("<table>" + "<tr><td><span class='spanLeft'><i class='fa fa-trash'></i></span></td>" +

        "<td colspan='2'>" +  $("input").val() + "</td>" +

        "<td><span class='spanRight'><i class='fa fa-check-square-o'></i></span></td>" +
        "</tr></table>");
        $("input").val('');
        sound.play();


    } //else

    $("input").val('');
});

CSS:

    canvas  {


    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*layer index*/
    z-index: -5;


}


body{

    height: 100%;
    margin: 0px;
    background: linear-gradient(to left, #16BFFD , #CB3066);
}



#container {
    width: 360px;
    /*to center:*/
    margin: 200px auto 200px auto;
    /*slight black shadow around*/
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); 
    background: #e6f3ff; 
    /**/

}



tbody, table {
    /*removes bulletpoints*/

    padding: 0;
    border: none;
    margin: 0;
    width: 100%;
    height: 100%;
/*removes annoying border from table that broswer creates*/
    border-collapse:collapse;
    background-color: white;


}

tr {

    color: #666;
    height: 40px;
    /*centers the text*/
    line-height: 40px;
    width: 100%;

}

/*every second li will get this background color IMPORTANT*/
tr:nth-child(2n){
    background:  #f7f7f7;
}


td {
    padding: 0;
    margin: 0;
    height: 100%;
    border: none;
    width: 20px;
}




/*mae the delete button appear. animated at span*/
tr:hover span{ 

    /*40px so we'll see the icons which were set to 0 at start*/
    width: 40px;
    opacity: 1.0; 
    border: rgb(0, 0, 0, 0,);
}

span {

    width: 0%;
    padding: 0;
    margin: 0;
}

.spanLeft {

    background: #e74c3c;
    height: 40px;
    margin-right: 20px;
    margin-left: 0px;

    float: left;
    text-align: center;
    color: white;
    /*set zero for animation*/
    width: 0px;
/*  display: inline-block;*/
    /*animates*/
    transition: 0.5s;
    opacity: 1; 



}


.spanRight {

    background: blue;
    height: 40px;
    margin-right:0px;
    margin-left: 20px;

    float: right;
    text-align: center;
    color: white;
    /*set zero for animation*/
    width: 0px;
/*  display: inline-block;*/
    /*animates*/
    transition: 0.5s;
    opacity: 0; 

}

input {
    padding: 13px 13px 13px 20px;
    font-size: 16px;
    background-color: #f7f7f7;
    width: 100%;
    /*box sizing includes the padd, margin etc*/
    box-sizing: border-box;
    /*takes a way the small gaps around input*/
    border: 3px solid rgba(0,0,0,0);

}

/*pnly when focued on an input*/
input:focus{
    background: #fff;
    border: 3px solid #2980b9;
    outline: none;
}


.completed {

    color: grey;
    text-decoration: line-through;
}


/*the plus sign*/
.fa-plus{

    background: none;
    border: none;
    float: right;
}



h1 { 
    color: white;
text-transform: uppercase; 
background: #2980b9;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: normal;
/*a google font*/
font-family: 'Roboto', sans-serif;
}

最佳答案

您设置动画的 span 元素内的图标不会像您预期的那样随 span 一起“缩小”。它显示在 0 宽度跨度的右侧(即溢出)。如果更改图标的颜色，左侧和右侧都会有相同的效果。

Span 是一个内联元素，因此它通常没有溢出属性，但您可以使用 display: inline-block 以给定的宽度和高度显示它。使用overflow:hidden在挤压span元素的宽度时隐藏图标。

关于javascript - 对齐表格中的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39040638/

31 4 0
文章推荐： swift - 谁的 View 仅在首次启动时不在窗口层次结构中
文章推荐： css - 仅为 Wordpress 中的主页更改 css 选择器
文章推荐： c++ - 如何从文本文件中读取多个单词？
文章推荐： ios - 我正在尝试从 Swift subreddit 解析 JSON。为什么我有问题？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com