Question

我正在开发一个应用程序开发，它将通过我的邮箱读取并在点击按钮后在我的网络应用程序的HTML表格中列出所有未读的电子邮件。以下是我在通过谷歌进行研究时所做的代码。

<!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>

我现在正在寻找并且无法做的事情是如何在每行的第一列中添加一个复选框。此外，在选中此复选框后，整个行应突出显示，以便我可以对所有选定的项目执行特定任务。

Answer 1

据我了解您的代码，您的第一列数据设置为：

tdsentBy.innerHTML = sentBy;

因此，在同一行中，您可以将文本框添加为字符串：

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

tdsentBy.innerHTML = cbox + sentBy;

通过这种方式，每行的第一列始终显示一个复选框。

现在在RowSelection函数中，要绑定事件，您可以执行以下操作：

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

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

1 个答案: