Question

我是jquery的新手，但我会尽力解释我的问题，这是我的问题：我有一个输入，我会在其中写一个随机问题例如 - 你多大了？我有2个按钮，第一个说：放在上面，第二个放在下面...现在我已经有2个问题，每个问题都有一个复选框，如果我在输入上写下并点击第一个按钮那个问题就是第一个问题＆＃34;它将高于其他问题（它将包括复选框）＆＃34;如果我点击第二个按钮，它将低于其他按钮＆＃34;它将包含复选框＆＃34;

问题是，我怎么能这样做，我需要保存所有行？或如何

这是我的源代码

<head>
    <title></title>
    <meta charset="utf-8"/>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="jquery-1.12.0.js"></script>
    <script src="jquery.js"></script>
    <script src="file2.js"></script>    
</head>
<body>
    <div id="id" class="mi_clase">
        <input type="text" id="pregunta">
        <button id="arriba" type="button">Poner arriba</button>
        <button id="abajo" type="button">Poner abajo</button>
        <a href="#" class="delete">Eliminar Fila</a>
        <table class="table">
            <tbody>
                <tr>
                    <td>Te gusta el cine?</td>
                    <td><input type="checkbox" value="1"/></td>
                </tr>
                <tr>
                    <td>Te gusta los tacos?</td>
                    <td><input type="checkbox" value="2"/></td>
                </tr>
            </tbody>
        </table>
        <button id="guardar" type="button">Guardar</button>     
    </div>
    <div class="mi_clase">
    </div>
</body>

这是我的js

$(document).ready(function() {
    $("#guardar").click(function() {
        var seleccionados = $.makeArray($(':checkbox').map(function(i, item) {
            if ($(item).is(':checked'))
                return parseInt($(item).val());
        }));

        console.log(seleccionados);
    });

    $('.delete').on('click', function() {
        $('.table input:checked').closest('tr').hide()
    });

    $("#arriba").click(function() {
        var p = $("#pregunta").val();
        console.log(p);
        var td1 = $("<td></td>").text(p);
        var td2 = $("<td><input type='checkbox' value='2' /></td>");
        var td3 = $("<td></td>");
        if (p != "") {

        }
    });

    $("#abajo").click(function() {

        if ($("#pregunta").val() != "") {
            $("tbody").append();
        }
    });

});

Answer 1

要append/prepend新行，您可以使用以下代码。请参阅代码中的注释。最后使用append将新行添加为最后一行，或使用prepend将新行添加为第一行。 HTH

function createNewRow(){
    var p = $("#pregunta").val();

    // create the new elements first
    var $tr = $("<tr>");
    var $td1 = $("<td>");
    var $td2 = $("<td>");
    var $input = $("<input>", {"type": "checkbox", "value": "2"});

    // append text to cell 1
    $td1.append(p);

    // append input to cell 2
    $td2.append($input);

    // append cells 1 and 2 to new row              
    $tr.append($td1);
    $tr.append($td2);

    return $tr;
}

// get body and prepend row to body
$("#arriba").click(function() {
    var $tr = createNewRow();
    var $tableBody = $(".table tbody");
    $tableBody.prepend($tr);
});

// get body and append row to body
$("#abajo").click(function() {
    var $tr = createNewRow();
    var $tableBody = $(".table tbody");
    $tableBody.append($tr);
});

或者像这样的简短形式：

$(".table tbody").prepend(createNewRow());

如何使用带有jquery

1 个答案: