如何輸出兩個數組到一個帶有刪除按鈕的html表格以確認刪除

Question

這裏是我的代碼，將電影信息插入到兩個數組中，然後用表格將其輸出到屏幕。如何讓刪除按鈕顯示出來，並將標題和導演分開放置在不同的列上？

var titles = []; 
var names = []; 

var titleInput = document.getElementById("title"); 
var nameInput = document.getElementById("name");  
var messageBox = document.getElementById("display"); 

function insert () { 
    titles.push(titleInput.value); 
    names.push(nameInput.value);  

    clearAndShow(); 
} 

function clearAndShow() { 
    // Clear our fields 
    titleInput.value = ""; 
    nameInput.value = ""; 
} 

// Print the info to a table 
function show() { 
    document.write('<table>'); 
    document.write('<tr><th>Titles</th></tr>'); 

    for (var i = 0; i < titles.length; i++) { 
     document.write('<tr><td>' + titles[i] + '</td></tr>'); 
    } 
    document.write('<tr><th>Directors</th></tr>'); 

    for (var i = 0; i < names.length; i++) { 
     document.write('<tr><td>' + names[i] + '</td></tr>'); 
    } 

    document.write('</table>');  
} 
//delete Button-reset 

Answer 1

這裏是JavaScript，我會用：

function addRow(title, director){ 
    return "<tr><td>" + title + "</td><td>" + director + "</td>" + deleteRowMarkup(title) + "</tr>"; 
} 

function deleteRowMarkup(title){ 
    return '<td><button on-click="del(title)">Delete Row</button></td>'; 
} 

function del(title){ 
    //carry out delete, most likely by removing Title/Description from the associated arrays. 
} 

function show(){ 
    document.write("<table>"); 
    document.write("<tr><th>Title</th><th>Director</th></tr>"); 
    var len = titles.length > names.length ? titles.length : names.length; 

    for (i = 0; i < len; i++){ 
    var t = titles.length > i ? titles[i] : ""; 
    var n = names.length > i ? names[i] : ""; 
    document.write(addRow(t,n) 
    } 

    document.write("</table>"); 
    document.write('<a href='#' on-click="clearAndShow">Delete</a>'); 
} 

我不是100％肯定你被刪除的意思或復位按鈕，但我把錨這將打電話給你clearAndShow功能