我的表格有一個額外的單元格

我有一個表格，並且在表格頂部出現了一個額外的空白單元格。你輸入一個名字，名字插入到表格中，頂部有一個計數器，用來計算有多少名字。有人能看我的代碼，並告訴我如何解決它。我的表格有一個額外的單元格

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

我的表格有一個額外的單元格

回答

相關問題