JavaScript-How to make Html Table editable

Question

我有一個使用JavaScript從.csv文件創建表的功能。我想讓表格的最後一列可編輯。在正在生成表部分功能是

for (var i = 0; i < CSVLines.length; i++) { 
    OutputTableRows += "<tr>"; 
    var CSVValues = CSVLines[i].split(","); 
    for (var j = 0; j < CSVValues.length; j++) { 
     OutputTableRows += "<td>" + "<p>" + CSVValues[j] + "<p>" + "</td>"; 
    } 
    OutputTableRows += "</tr>"; 
} 

我已經試過

OutputTableRows += "<td>" + "<p contenteditable="true">" + CSVValues[j] + "<p>" + "</td>"; 

，但它不工作

Answer 1

我想你應該說，在你的內部循環： -

if(j == CSVValues.length-1){ 
    tableRow = '<td><input type="text" value="VALUE"/></td>'; 
    tableRow = tableRow.replace('VALUE',CSVValues[j]); 
    OutputTableRows += tableRow; 
} 
else{ 
    OutputTableRows += "<td>" + "<p>" + CSVValues[j] + "<p>" + "</td>"; 
} 

Answer 2

我建議，乍一看：

OutputTableRows += "<td>" + "<p" + (j === (CSVValues.length - 1) ? " contentEditable" : "") + ">" + CSVValues[j] + "</p>" +"</td>"; 

相關部分當然是：

"<p" + (j === (CSVValues.length - 1) ? " contentEditable" : "") + ">" 

如果j等於CSVValues減去1的長度，那麼它是合理的假設，這必須是for循環的最後一次迭代，因此這是應該有contentEditable屬性行，否則它應該不（並且必須是循環的更早的迭代）。

此外，請注意已更改的</p>（來自您的原始<p>），它會關閉已打開的<p>，而不是創建新的兄弟段落元素。

參考文獻：

• Conditional ('ternary') operator。
• contentEditable attribute。