Question

我对javascript很新。我自己这样做很重要，而不是有人为我做这件事。我想要做的是创建一个网页，用户可以在其中输入员工的名字，姓氏和薪水。然后在下面有一个表格，在输入后显示信息。理想情况下，我希望每次提交信息时信息都会按字母顺序更新和排序，但按字母顺序排序＆＃34;按字母顺序排序＆＃34;按钮也可以正常工作。

现在我只是在表格中显示信息时出现问题。所以我想我的第一个问题是获取表行以显示lastNames，firstNames和工资数组的0,1,2,3位置的信息。无论如何我可以onclick显示表行例如lastNames [0]，然后在添加一个员工之后让它显示lastNames [1]，依此类推？

<html>
<head>
<script type="text/javascript">



var lastNames= [];
var firstNames= [];
var salaries= [];


function addToArray() {

var ln = document.getElementById('lastName');
var fn = document.getElementById('firstName');
var sly = document.getElementById('salary');

lastNames[lastNames.length] = ln.value;
firstNames[firstNames.length] = fn.value;
salaries[salaries.length]= sly.value;


document.getElementById('first1').innerHTML = firstNames;
document.getElementById('last1').innerHTML = lastNames;
document.getElementById('sal1').innerHTML = "$" +salaries;
}

</script>
</head>
<body>
Enter last name: <input type="text" id="lastName"><br>
Enter first name: <input type="text" id="firstName"><br>
Enter salaries: <input type="text" id="salary"><br>
<input type="button" value="click me add to array" onclick="addToArray()">
<table border="1" id="source" cellspacing="3" cellpadding="3">
<tr><td><strong>Employee First Name</strong></td>
<td><strong>Employee Last Name</strong</td>
<td><strong>Employee Salary</strong</td></tr>
<tr><td id="first1"></td><td id="last1"></td><td id="sal1"></tr>
<tr><td id="first2"></td><td id="last2"></td><td id="sal2"></tr>
<tr><td id="first3"></td><td id="last3"></td><td id="sal3"></tr>
</body>
</html>

Answer 1

您将整个阵列放在一个单元格中。而是使用：

document.getElementById('first1').innerHTML = firstNames[0];

对数组中的每个值执行此操作。您可以将其概括为一个for循环，从i = 0到i = firstNames.length，将其作为id传递：

var id = "first"+(i+1);

并将内部文本分配给

firstNames[i].

假设表中有足够的行用于数组中的所有元素。如果您希望在添加员工时动态添加行，那么这是另一个问题。

Answer 2

同样有用的还有Array.sort和String.localeCompare：

var data = [{
  firstName: 'chris',
  lastName: 'cole',
  score: 8.8
}, {
  firstName: 'chaz',
  lastName: 'ortiz',
  score: 5
}, {
  firstName: 'nyjah',
  lastName: 'huston',
  score: 5
}];

function sorter (left, right){
  var result = left.lastName.localeCompare(right.lastName);
  return result;
};

console.log(data.sort(sorter))

使用用户输入的信息更新表格，按字母顺序显示表格显示数组值？

2 个答案: