如何在javascript中添加一个具有checkbox属性的变量，该变量将填充view.php中的一个表

我有一个shift.js和shift_view.php

在shift_view.php中：

<div style="float:left;width:1200px;">
        <div style="float:left;width:800px;">
            <table cellpadding="0" cellspacing="0" border="0" class="display dataTable" id="main_table" aria-describedby="example_info" style="width: 100%;">
                <thead>
                    <tr role="row">
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Select</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">ID</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Region</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Description</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Start Time</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">End Time</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">$/hr</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Ride Bonus</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Ride Bonus Rate</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Drivers</th>
                        <th class="sorting" role="columnheader" tabindex="0" aria-controls="example" rowspan="1" colspan="1">Edit Shift</th>
                    </tr>
                </thead>
                <tbody role="alert" aria-live="polite" aria-relevant="all">
                </tbody>
            </table>
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        </div>
    </div>

设置表的第一行

和shift.js:

for(var i = 0; i < 2; i++){
                var shift = response[i];
                var arr = [ I_NEED_A_CHECK_BOX_VAR,
                            shift.ID,
                            regions[shift.RegionID],
                            shift.Description,
                            shift.StartStr,
                            shift.EndStr,
                            parseFloat(shift.GuaranteeRate).toFixed(2).toString(),
                            parseFloat(shift.RideBonus).toFixed(2).toString(),
                            parseFloat(shift.RideBonusRate).toFixed(2).toString(),
                            shift.NumDrivers.toString() + " / " + shift.DriversNeeded,
                            '<font size="6" color="green"><b><a style="text-decoration:none" href="/shift/editShift/'+shift.ID+'">Edit</a></b></font>'];
                if(parseInt(shift.NumDrivers) < 0.75 * parseInt(shift.DriversNeeded)){
                    arr[arr.length-2] = '<font color="red"><b>' + arr[arr.length-2] + '</b></font>';
                }
                if(shift.StartTimestamp*1000 < Date.now() && Date.now() < shift.EndTimestamp*1000 ){
                    arr[0] = '<font size="6" color="green"><b>' + arr[0] + '</b></font>';
                }
                $('#main_table').dataTable().fnAddData(arr);

js会将数据填充到视图中。我应该如何对"i_NEED_A_CHECK_BOX_VAR"使其成为复选框？

我的任务是让每一行都是可选择的，这样当点击"提交"按钮时，所选行就会发生变化。ID将被发送到数组中的另一个函数。

从所有的研究中，我只能发现html（视图）中有一个复选框，因为视图主动调用函数来获取数据，但在这种情况下，视图不是，而是js更新视图。

谢谢你的帮助！！Luke