天天看點

實作選中複選框,并取出選中複選框的那一行資料

情況:我要批量插入表格裡的資料,使用複選框,選中複選框時,怎麼把該複選框的行的資料也取出來。

實作選中複選框,并取出選中複選框的那一行資料

像這樣,我要取出标題,作者等資訊,咋取?在這記一下。

jsp頁面,我的表格是醬的,我要取fid,title,userid

<table class="layui-table" lay-skin="line">
                <colgroup>
                </colgroup>
                <thead>
                <tr>
                    <th><input type="checkbox" name="checkbox_all" id="checkbox_all" lay-skin="primary">全選</th>
                    <th>标題</th>
                    <th>作者</th>
                    <th>閱讀數</th>
                    <th>獲贊數</th>
                    <th>收藏數</th>
                    <th>評論數</th>
                </tr>

                </thead>
                <tbody>
                <tr>
                    <c:forEach items="${allArticles}" var="allArticles" end="10">
                    <td><input type="checkbox" name="checkbox_name" value="${allArticles.fid}" lay-skin="primary"></td>
                    <td>
                        <input hidden value="${allArticles.title}" name="title">
                        <a href="showArticle?fid=${allArticles.fid}&&userid=${allArticles.userid}" target="_blank" rel="external nofollow" >${allArticles.title}</a>
                    </td>
                    <td><input hidden value="${allArticles.userid}" name="userid">${allArticles.username}</td>
                    <td>${allArticles.readNum}</td>
                    <td>${allArticles.likes}</td>
                    <td>${allArticles.collectNum}</td>
                    <td>${allArticles.commentNum}</td>
                </tr>
                </c:forEach>
                </tbody>
            </table>
           

腳本:

let oid = document.getElementsByName("checkbox_name");
        $('.submit_btn').on('click', function () {
                let ids = "";
                let userids = "";
                let titles = "";
                let n = 0;
                let a = 0;
                let b = 0;
                for (let i = 0; i < oid.length; i++) {
                    if (oid[i].checked == true) {//選中為true
                        const row = $(oid[i]).parent("td").parent("tr");//擷取選中行
                        const userid = row.find("[name='userid']").val();//擷取userid
                        const title = row.find("[name='title']").val();//擷取title
                        let id = oid[i].value;
                        if (n == 0) {
                            ids += id;
                        } else {
                            ids += "," + id;
                        }
                        if (a == 0) {
                            userids += userid;
                        } else {
                            userids += "," + userid;
                        }
                        if (b == 0) {
                            titles += title;
                        } else {
                            titles += "," + title;
                        }
                        b++;
                        n++;
                        a++;
                    }
                }
                // const row = $(oid).parent("td").parent("tr");//擷取選中行
                // const userid = row.find("[name='userid']").val();//擷取userid
                // alert(userids + "userid");
                if (!ids) {
                    layer.alert('選中之後再點選确定啦');
                } else {
                    let data = {
                        ids: ids,
                        userids: userids,
                        titles: titles,
                        label: $('input:radio:checked').val()
                    };
                    $.ajax({
                        type: "Post",
                        url: "insert_discover",
                        // contentType: "charset=utf-8",
                        data: data,
                        dataType: "json",
                        success: function (result) {
                            if (result.resultCode == 200) {
                                layer.msg('操作成功!');
                            }
                            if (result.resultCode == 404) {
                                layer.msg('操作失敗!');
                            }
                            setTimeout(function () {
                                window.location.reload();//重新整理目前頁面.
                            }, 2000)
                        },
                        error: function (data) {
                            layer.alert('失敗');
                        }
                    });
                }

            }
        )
           

存進數組,後面接受,那麼我要怎麼把這些資料存入資料庫?我要寫在另一篇,兩個不同的知識點,我分開寫,以後好找。