我的表格有一个额外的单元格

我有一个表格，并且在表格顶部出现了一个额外的空白单元格。你输入一个名字，名字插入到表格中，顶部有一个计数器，用来计算有多少名字。有人能看我的代码，并告诉我如何解决它。我的表格有一个额外的单元格

var userNames = []; 


function getName() { 
    //Variables 
    var input; 
    var userName; 
    //Initializes input 
    input = document.getElementById("nameInput"); 
    //Reads input 
    userName = input.value; 
    //Assigns userName 
    userNames[userNames.length] = userName; 
    //Clears the input 
    input.value = ""; 
    input.focus(); 
} 


function printTotal() { 
    //Constants 
    var LABEL = "Total: "; 
    //Variables 
    var total; 
    var output; 
    //Initializes output 
    output = document.getElementById("totalOutput"); 
    //Gets number 
    total = userNames.length; 
    //Output 
    output.innerHTML = LABEL + total; 
} 


function printNames() { 
    //Constants 
    var OPEN_CELL = "<tr style=\"height : 1.5eM;\"><td>"; 
    var CLOSE_CELL = "</tr></td>"; 
    var ONE = 1; 
    //Varialbles 
    var output; 
    var index; 

    output = document.getElementById("nameOutput"); 

    index = userNames.length - ONE; 

    output.innerHTML += OPEN_CELL + userNames[index] + CLOSE_CELL; 
} 

function project62Part2() { 
    // Your code goes in here. 
    getName(); 
    printTotal(); 
    printNames(); 
    return false; 
}

HTML文件中的代码

<div id="outputDiv" class="output"> 
<form action="#" onsubmit="return project62Part2();"> 
    <label for="nameInput" style="float : left;">Name:</label> 
    <input type="text" id="nameInput" style="float : left;" /> 
    <input type="submit" value="submit" style="float : left; clear : left" /> 
    <!--<p id="totalOutput"> 
    </p>--> 
    <table id="nameOutput"> 
     <tr> 
      <th id="totalOutput"> 
       Total: 0 
      </th> 
     </tr> 
    </table> 
</div> 

<script type="text/javascript">project62Part2();</script>

来源

2013-12-17 user3038615

固定'CLOSE_CELL'定义是否工作？它应该是'“”'。 – GregL

我只是试过，没有改变。 – user3038615

你真的需要''？我认为最初调用'getName（）'在'userNames'数组中创建一个空条目 –

您运行Project62Part2（）在页面加载。您使用userNames [userNames.length]实际上是正确的，因为您要在基于0的数组尾部添加新项目。但是，当输入为空时，您的getName的初始执行将在userNames [0]中插入一个空字符串。

我建议一些基本验证：

if (userName != "") 
userNames[userNames.length] = userName;

你可能不想反正插入空白，是吗？ CLOSE_CELL的

来源

2013-12-17 22:15:59

标记是不正确的。您应该首先获取单元格的结束标记，然后是该行的结束标记。

var OPEN_CELL = "<tr style=\"height : 1.5eM;\"><td>"; 
var CLOSE_CELL = "</td></tr>";

来源

2013-12-17 22:17:25

正如保罗评论说，答案是，要project62Part2()初始调用运行该功能，这就要求getName()，其将获取输入一个空值，并添加到阵列中。

你只需要调用表单提交的功能。

见this jsFiddle的证明。

来源

2013-12-17 22:17:47 GregL

因此，删除函数project62Part2（）？ – user3038615

不，不要删除函数本身。只需在HTML代码末尾的代码中删除对它的调用：'' – GregL

除了对project62Part2()的无关呼叫之外，我建议考虑DOM操作而不是直线字符串并使用innerHTML播放。例如：

function printNames() { 
    var output = document.getElementById("nameOutput"); 

    var tr = document.createElement('tr'); 
    tr.style.height = '1.5em'; 
    var td = document.createElement('td'); 
    var content = document.createTextNode(userNames[userNames.length - 1]); 

    td.appendChild(content); 
    tr.appendChild(td); 
    output.tBodies[0].appendChild(tr); 
}

来源

2013-12-17 22:34:38

我的表格有一个额外的单元格

回答

相关问题