选中复选框时发布表格行，使用 AJAX 检索表格数据

Question

查看：

<div class="container">

<?php echo form_open('sendmessage/sendsms', 'class="form-horizontal"'); ?>

<div class="form-group">
<select class="form-control" id="sel_depart" name="plant">
            <option value="0">- Select -</option>
            <option value="Kiln">Kiln</option>
           <option value="Cement Mill">Cement Mill</option>
        </select>
        </div>

        <div class="clear"> </div>
        <div class="form-group">
        <select class="form-control" id="sel_group" name="group">
            <option value="0">- Select -</option>
            <option value="5910b5e185f909f4078b4569">IT</option>
           <option value="2">Random</option>
        </select>
        </div>
        <br><br>

        <div>
   <table border="0" id="sel_user" border="1" class="box-table-a" >
   <thead>
      <tr>
      <th width="5%"><a href='#' id='selectAll'>Select</a></th>
     <th width="5%">S.no</th>
       <th width="20%">Reason</th>

      </tr>
      </thead>
   </table>
</div>

<input type="submit" class="btn btn-primary" value="Submit Checked Rows" id="submit_btn">

<?php echo form_close() ?>
</div>
</body>
</html>

AJAX：

$(document).ready(function(){

    $("#sel_depart").change(function(){
        var deptid = $(this).val();
        $.ajax({
            url: '<?php echo site_url('sendsms/send_sms')?>',
            type: 'post',
            data: {depart:deptid},
            dataType: 'json',
            success:function(response){
                console.log(response);
                var len = response.length;
                $("#sel_user td").detach();
                for( var i = 0; i<len; i++){
                    var id = response[i]['id'];
                    var plant = response[i]['plant'];
                    var area = response[i]['area'];
                    var eq = response[i]['eq'];
                    var reason = response[i]['reason'];

                    var tr_str = "<tbody>" + 
                    "<tr class='normal'>" +
                    "<td ><input type='checkbox' class='checkbox' name='checked_id[]' id='chk_"+i+"' value='"+id+"'/></td>" +
                    "<td >" + (i+1) + "</td>" +
                    "<td >"+" Plant-" + plant + "," + " Area-" + area + " Equip No-" + eq + " Reason-" + reason + "<input type='hidden' name='reason[]' value='"+"Breakdown Msg:" + " Plant-" + plant + "," + " Area-" + area + " Equip No-" + eq + " Reason-" + reason +"'/></td>" +
                    "</tr>" +
                    "</tbody>";

                $("#sel_user").append(tr_str);



                }
            }
        });
    });

});

注意
我的表是使用 AJAX 生成的，现在我想使用复选框提交只选中 行到我的控制器。
目前当我按下提交按钮时，所有行都被提交，所以请提出您的宝贵建议。

Answer 1

你期望什么？您的桌子周围有一个表格 - 所以每次您提交表格时，所有内容都会提交。

为了实现你想要的，你必须构建一个动态的 FormData 对象 你可以试试类似的东西

$("input[type='submit']").on("click", function(e)
{
    e.preventDefault();
    e.stopImmediatePropagation();

    var objForm = $(this).closest("form");
    var objFormData = new FormData();

    var blnSendForm = false;

    $("input[name^='checked_id']:checked").each(function()  {

        var objTr = $(this).closest("tr");
        objFormData.append("reason[]",$(objTr).find("input[name^='checked_id']").val());
        blnSendForm = true;
    });

    if (blnSendForm)
    {
        $.ajax({
            url : $(objForm).attr("action"),
            data : objFormData,
            processData : false,
            contentType: false,
            type: "POST",
            success : function(data)
            {
                alert(data);
            }
        });
    }
    else
    {
        alert("no data selected");
    }

});