Javascipt电子邮件数组，在HTML表格中显示 [英] Javascipt array of emails , showing it in HTML table
本文介绍了Javascipt电子邮件数组，在HTML表格中显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
您将收到12个电子邮件ID的数组。
输入：
You are given an array of12 email ids.
INPUT :
// Here is the array containing all email ids.
var emailIds = [ "albert.eisntein@gmail.com", "leonardo_da_vinci@hotmail.com",
"jagadish_chandra_bose@yahoo.com", "alan_turing@yahoo.com", "srinivasa.ramanujan@gmail.com",
"bjarne_stroustrup@yahoo.com", "max.planck@gmail.com", "nikola.tesla@hotmail.com",
"galileo_galilei@hotmail.com", "a.p.j.abdul.kalam@gmail.com", "richard.stallman@inbox.com", "devin.guffy@yandex.com"];
解析给定的数组（仅使用纯JavaScript）并创建一个带4列的HTML表格
如下图所示：
parse the given array (using only plain JavaScript ) and create an HTML table with 4 columns
as shown below:
a. Gmail - containing all email ids with domain gmail.com.
b. Hotmail - containing all email ids with domain hotmail.com.
c. Yahoo - containing all email ids with domain yahoo.com.
d. Others - containing all email ids with domains not in a,b, and c, i.e., NOT gmail, hotmail and
yahoo.
我的尝试：
What I have tried:
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table id="table" border="1" >
<tr>
<th>Gmail</th>
<th>Hotmail</th>
<th>Yahoo</th>
<th>Others</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var emailIds = [ "albert.eisntein@gmail.com", "leonardo_da_vinci@hotmail.com",
"jagadish_chandra_bose@yahoo.com", "alan_turing@yahoo.com", "srinivasa.ramanujan@gmail.com",
"bjarne_stroustrup@yahoo.com", "max.planck@gmail.com", "nikola.tesla@hotmail.com",
"galileo_galilei@hotmail.com", "a.p.j.abdul.kalam@gmail.com", "richard.stallman@inbox.com",
"john_von_neumann@mail.com", "c_v_raman@yahoo.com", "isaac.newton@yandex.com",
"s_chandrashekar@hotmail.com", "james_gosling@shortmail.com", "ken.thompson@gmail.com",
"stephen_hawking@rediffmail.com", "marie_curie@yahoo.com", "michael.faraday@hotmail.com",
"charles.babbage@hotmail.com" ];
var table=document.getElementById("table");
for(var i=1;i<table.rows.length;i++){
table.rows[i].innerHTML=emailIds[i-1];
}
</script>
</body>
</html>
推荐答案
<html>
<head>
<title>array </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id ="email_table"></div>
<script>
var myTableDiv = document.getElementById("email_table");
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');
table.border = '1';
table.appendChild(tableBody);
var heading = [];
heading[0] = "Gmail";
heading[1] = "Hotmail";
heading[2] = "Yahoo";
heading[3] = "Other's";
var tr = document.createElement('TR');
tableBody.appendChild(tr);
for (i = 0; i < heading.length; i++) {
var th = document.createElement('TH');
th.style.color="red";
th.width="100";
th.appendChild(document.createTextNode(heading[i]));
tr.appendChild(th);
}
var emailIds = ["albert.eisntein@gmail.com", "leonardo_da_vinci@hotmail.com",
"jagadish_chandra_bose@yahoo.com", "alan_turing@yahoo.com",
"srinivasa.ramanujan@gmail.com", "bjarne_stroustrup@yahoo.com",
"max.planck@gmail.com", "nikola.tesla@hotmail.com",
"galileo_galilei@hotmail.com", "a.p.j.abdul.kalam@gmail.com",
"richard.stallman@inbox.com", "john_von_neumann@mail.com",
"c_v_raman@yahoo.com", "isaac.newton@yandex.com",
"s_chandrashekar@hotmail.com", "james_gosling@shortmail.com",
"ken.thompson@gmail.com", "stephen_hawking@rediffmail.com",
"marie_curie@yahoo.com", "michael.faraday@hotmail.com",
"charles.babbage@hotmail.com"];
var count_gmail = 0;
var count_hotmail = 0;
var count_yahoo = 0;
var count_others = 0;
for (i = 0; i < emailIds.length; i++) {
if (emailIds[i].indexOf("gmail") >= 0) {
count_gmail++;
} else if (emailIds[i].indexOf("hotmail") >= 0) {
count_hotmail++;
} else if (emailIds[i].indexOf("yahoo") >= 0) {
count_yahoo++;
} else {
count_others++;
}
}
var maxRow = Math.max(count_gmail, Math.max(count_hotmail, Math.max(count_yahoo, count_others)));
for (i = 0; i < 6; i++) {
var tr = document.createElement('TR');
for (j = 0; j < 4; j++) {
var td = document.createElement('TD');
td.appendChild(document.createTextNode(" "));
tr.appendChild(td);
}
tableBody.appendChild(tr);
}
var row_gmail = 1;
var row_hotmail = 1;
var row_yahoo = 1;
var row_others = 1;
for (i = 0; i < emailIds.length; i++) {
if (emailIds[i].indexOf("gmail") >= 0) {
table.rows[row_gmail++].cells[0].innerHTML = emailIds[i];
} else if (emailIds[i].indexOf("hotmail") >= 0) {
table.rows[row_hotmail++].cells[1].innerHTML = emailIds[i];
} else if (emailIds[i].indexOf("yahoo") >= 0) {
table.rows[row_yahoo++].cells[2].innerHTML = emailIds[i];
} else {
table.rows[row_others++].cells[3].innerHTML = emailIds[i];
}
}
myTableDiv.appendChild(table);
</script>
</body>
</html>
这篇关于Javascipt电子邮件数组，在HTML表格中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
