如何在HTML表的第一列的单元格中添加复选框？

Question

I am working on an app development which will read through my mailbox and list all the unread e-mails in a HTML table on my web-app upon click of a button. 我正在开发一个应用程序，单击该按钮后，它会通读我的邮箱并在我的Web应用程序的HTML表中列出所有未读的电子邮件。 Below is the code which I have made while researching through google which solves for the purpose. 下面是我通过google研究时为达到目的而编写的代码。

<!DOCTYPE html>
<html>
<body>

<button onclick="groupFunction()">Click me</button>

<table id="tblContents">
   <tr onclick="tableClickTest()">
    <th>Sender</th>
    <th>Sent_Date</th> 
    <th>Received_By</th>

<th>Received_Date</th>
<th>Subject</th>
</tr>

</table> 


<script>

function RowSelection()
{
var table = document.getElementById("tblContents");
if (table != null) {
    for (var i = 0; i < table.rows.length; i++) {
        for (var j = 0; j < table.rows[i].cells.length; j++)
        table.rows[i].cells[j].onclick = function () {
            tableText(this);
        };
    }
}
}


function tableText(tableCell) {
    alert(tableCell.innerHTML);
}



function PopulateTable()
            {

                var objOutlook = new ActiveXObject("Outlook.Application");
                var session = objOutlook.Session;
//alert(session.Folders.Count)                
                for(var folderCount = 1;folderCount <= session.Folders.Count; folderCount++)
                {
                    var folder = session.Folders.Item(folderCount);
//alert(folder.Name)                
                    if(folder.Name.indexOf("Premanshu.Basak@genpact.com")>=0)
                    {
                        for(var subFolCount = 1; subFolCount <= folder.Folders.Count; subFolCount++)
                        {
                            var sampleFolder = folder.Folders.Item(subFolCount);
//alert(sampleFolder.Name)
                            if(sampleFolder.Name.indexOf("test1")>=0)
                            {
                                for(var itmCount = 1; itmCount <= sampleFolder.Items.Count; itmCount++)
                                {                                    
                                    var itm = sampleFolder.Items.Item(itmCount);
                                    if(!itm.UnRead)
                                        continue;
                                    var sentBy = itm.SenderName;
                                    var sentDate = itm.SentOn;
                                    var receivedBy = itm.ReceivedByName;
                                    var receivedDate = itm.ReceivedTime;
                                    var subject = itm.ConversationTopic;
//                                    var contents = itm.Body;

                                    var tbl = document.getElementById("tblContents");
                                    if(tbl)
                                    {
                                     var tr = tbl.insertRow(tbl.rows.length);
//                  tr.onclick(tableClickTest())                                  

                                     if(tbl.rows.length%2 != 0)
                                     tr.className = "alt";

                                     var tdsentBy = tr.insertCell(0);
                                     var tdsentDate = tr.insertCell(1);
                                     var tdreceivedBy = tr.insertCell(2);
                                     var tdreceivedDate = tr.insertCell(3);
                                     var tdsubject = tr.insertCell(4);
//                                     var tdcontents = tr.insertCell(5);        

                                     tdsentBy.innerHTML = sentBy;    
                                     tdsentDate.innerHTML = sentDate;
                                     tdreceivedBy.innerHTML = receivedBy;
                                     tdreceivedDate.innerHTML =    receivedDate;
                                     tdsubject.innerHTML = subject;
//                                     tdcontents.innerHTML = contents;
                                     }
                                   //itm.UnRead = false;    
                                 }
                                break;    
                            }
                        }
                        break;
                      }
                    }
                return;
            }    

function groupFunction()
{
PopulateTable()
RowSelection()
}


</script>

</body>
</html>

The thing that I am now looking for and is unable to do is how do I add a checkbox in the first column in each row. 我现在正在寻找且无法做的事情是如何在每一行的第一列中添加一个复选框。 Also upon checking this checkbox the entire row should get highlighted so that I can perform specific task on all the selected items. 同样，选中此复选框后，整个行应突出显示，以便我可以对所有选定的项目执行特定的任务。

Answer 1

As far as I have understood your code, your first column's data is being set as: 据我了解您的代码，您第一列的数据设置为：

tdsentBy.innerHTML = sentBy;

So in the same line, you can add textbox as a string as: 因此，在同一行中，您可以将文本框添加为字符串，如下所示：

var cbox = "<div class='select-box'>  
    <input type='checkbox' name='selectBox' class='select-row'>  
    </div?>"

tdsentBy.innerHTML = cbox + sentBy;

In this way, a checkbox will always be available in first column of every row. 这样，复选框将始终在每一行的第一列中可用。

Now in RowSelection function, to bind event you can do something like: 现在，在RowSelection函数中，要绑定事件，您可以执行以下操作：

var checkBox = table.rows[i].cells[j].querySelector(".select-row");
checkBox.addEventListener("click",function(evt){
});

如何在HTML表的第一列的单元格中添加复选框？

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-24 18:28:24

如何在HTML表的第一列的单元格中添加复选框？

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-24 18:28:24

解决方案1
0 已采纳 2016-10-24 18:28:24