Appending rows Jquery/Bootstrap

Appending rows Jquery/Bootstrap

本文关键字：Bootstrap Jquery rows Appending      更新时间：2023-09-26

我的mkRow()函数根本不起作用，我想知道原因。我试过让按钮附加一个简单的<h1>Hello</h1>，它运行得很好，但当我尝试这个时，它只是失败了

我的HTML:

<html>
<head>
    <title>Testing</title>
</head>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylo.css">
    <script type="text/javascript" src="functions.js"></script>
<body>
    <div class="container" id="main">
        <div class="row">
            <div class="col-sm-12" id="Header">
                <h1>Todo List</h1>
            </div>
        </div>
        <div class="row" id="row1">
            <div class="col-sm-2"></div>
            <div class="col-sm-2 not-done item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div>
            </div>
            <div class="col-sm-1"></div>
            <div class="col-sm-2 in-progress item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div>
            </div>
            <div class="col-sm-1"></div>
            <div class="col-sm-2 done item">
                <div class="boton btnleft"><</div>
                <p>what</p>
                <div class="boton btnright">></div> 
            </div>
            <div class="col-sm-2"></div>
        </div>
    </div>
</body>
</html>

我的.js文件：

$(document).ready(init);
var rows = 0;
function init(){
    $(".btnright").on('click', mkRow);
    $(".btnleft").on('click', moveLeft);
}
function mkItem(content){
    var protoItem = '<div class="col-sm-2 item"><div class="boton btnleft"><</div><p>' + contenido + '</p><div class="boton btnright">></div></div>';
    return protoItem;
}
function getRows(){
    rows++;
    return rows;
}
function mkRow(){
    $("#main").append('
        <div class="row" id="row' + getRows + '">
            <div class="col-sm-2"></div>
            <div class="col-sm-2 not-done item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div>
            </div>
            <div class="col-sm-1"></div>
            <div class="col-sm-2 in-progress item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div>
            </div>
            <div class="col-sm-1"></div>
            <div class="col-sm-2 done item">
                <div class="boton btnleft"><</div>
                <div class="boton btnright">></div> 
            </div>
            <div class="col-sm-2"></div>
        </div>');
}
function moveRight(){
    //
}
 function moveLeft(){
    //
}

当使用.append()或.html()时，您可以在一行中创建它，或者对于多行，您需要使用+符号

.append('<div>'+
           '<span>'+
           '</span>'+
        '</div>';
        );
相关文章：