Question

我有一个基本表，我从文本输入创建，当您单击“addTask”按钮时，它添加一个带有空文本框的tr并单击“delTask”按钮应删除表中具有复选框的行检查。

一切都在JSFiddle中完美运行（除了渲染最后一个文本框readonly的行，只能在JSFiddle之外工作）但是当我尝试实时测试代码时，“delTask”按钮无法正常工作。它将删除除表中第一行之外的所有行。

我对JQuery很新，所以请不要判断它是否简单但是我真的在寻找答案并尝试了我能找到的一切。任何人都可以帮我弄清楚这里有什么问题吗？提前致谢。

编辑我通过将$（“：checkbox [checked ='true']”）更改为$（“。复选框：已选中”，修复了delTask按钮的初始问题。）在JSFiddle之外进行测试但仍无法在实时测试中获取按钮删除表中的第一行。 JSFiddle链接：http://jsfiddle.net/2aLfr794/14/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
</head>

<body>
<table id="tasks" cellpadding="3" cellspacing="3" border="0">
    <tr>
        <td><input type="checkbox"></td>
        <td><input type="text" class="text"></td>
    </tr>
</table>
<br>
&nbsp; &nbsp; &nbsp;
<input type="button" id="addTask" value="Add Task" />
&nbsp; &nbsp; &nbsp;
<input type="button" id="delTask" value="Delete Tasks" />


<script>

$("#addTask").click(function(){
    var newTxt = $('<tr><td><input type="checkbox"></td><td><input type="text" class="text"></td></tr>');
    $(".text").last().prop("readonly", true);

    $("#tasks").append(newTxt);
});

    $("#delTask").click(function(){
            $(".checkbox:checked").each(function(){
                var curTask = $(this).parents('tr');
                curTask.remove();
            });
    });


</script>
</body>
</html>

Answer 1

您的问题：

1.您没有将班级checkbox分配给默认checkbox并动态创建checkboxes。

2.要访问已检查元素，语法为$(".checkbox[checked='checked']")

您更新的代码：

＆＃13;

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<body>
    <table id="tasks" cellpadding="3" cellspacing="3" border="0">
        <tr>
            <td>
                <input type="checkbox" class="checkbox">
            </td>
            <td>
                <input type="text" class="text">
            </td>
        </tr>
    </table>
    <br />&nbsp; &nbsp; &nbsp;
    <input type="button" id="addTask" value="Add Task" class="addSubmit" />&nbsp; &nbsp; &nbsp;
    <input type="button" id="delTask" value="Delete Selected Tasks" />
    <script>
        $("#addTask").click(function() {
            var newTxt = $('<tr><td><input type="checkbox" class="checkbox"></td><td><input type="text" class="text"></td></tr>');
            $(".text").last().prop("readonly", true);
            $("#tasks").append(newTxt);
        });

        $(document).ready(function() {
            $("#delTask").click(function() {
                console.log($(".checkbox[checked='checked']"))
                $(".checkbox:checked").each(function() {
                    var curTask = $(this).parents('tr');
                    curTask.remove();

                });
            });
        });
    </script>
</body>

＆＃13;

Answer 2

如果你得到＆＃34; $未定义＆＃34;错误，尝试写作 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>为<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

注意＆＃34; http：＆＃34;之前＆＃34; // cdnjs＆＃34;当您从本地计算机运行它们时需要它，而不是Web服务器。至少它总是需要我。

Answer 3

// myapp/app/Http/Middleware/ApiSession.php

<?php

namespace App\Http\Middleware

use Closure;

class ApiSession {

         public function handle($request, closure $next){

               \Config::set('session.driver', 'array');
               \Config::set('cookie.driver', 'array');

         }
}

为我工作

无法使Jquery在JSFiddle之外正常工作

3 个答案: