在innerHTML中調用javascript函數

我創建了一個addRow函數，該函數允許我將行添加到表中。我添加行後，我想創建一個選項來刪除新行。有沒有辦法回收我的功能？在innerHTML中調用javascript函數

function addRow() { 
var table = document.getElementById('dataTable'); 
var rowCount = table.rows.length; 
var newRow= table.insertRow((1)); 
var c0 = newRow.insertCell 
c0.innerHTML="<div ><img src='include/images/cross.png' alt='delete row' onclick='deleteRow(rowCount)'/></div>"; 
    } 

function deleteRow(row){ 
var elem = document.getElementById('tr'+row); 
var old = (elem.parentNode).removeChild(elem); 
}

來源

2012-08-01 Jonathan Chan

只是想提到，當你使用onclick ='deleteRow'屬性時，deleteRow（）必須是一個全局函數，這不是一個最佳實踐。你考慮過事件綁定嗎？ – Evgeny 2012-08-01 06:49:23

如何約

onclick='deleteRow(this)'

和具有

function deleteRow(img) { 
    var thisRow = img.parentNode.parentNode.parentNode; // div..td..tr 
    thisRow.parentNode.removeChild(thisRow); 
}

來源

2012-08-01 05:51:28 mplungjan

缺少一個'parentNode'？ 'thisRow'仍然會指向一個'TD'。 – Jay 2012-08-01 05:56:44

好的，我明白了。它的工作原理 – 2012-08-01 06:05:52

@mplungjan：將此URL添加爲演示鏈接：http://jsfiddle.net/akhurshid/vhA4c/ – 2012-08-01 06:08:35

可能的解決方法，使用按鈕而不是圖像，並保持表爲deleteRow功能的引用：

<table id='dataTable'></table> 
<button onclick='addRow()'>add</button> 
<script> 
var table = document.getElementById('dataTable'); 
function addRow() { 
var rowCount = table.rows.length; 
var newRow= table.insertRow(0); 
var c0 = newRow.insertCell(); 
var button = document.createElement("button"); 
button.innerHTML = "delete"; 
button.row = newRow; 
button.addEventListener("click", function(e) { 
    deleteRow(this.row); 
}) 
    c0.appendChild(button); 
} 

function deleteRow(row){ 
    table.firstChild.removeChild(row); 
} 
</script>

來源

2012-08-01 05:57:55 sq2

mplungjan我面前技術上回答，但我已經做所以這裏一個例子，你去：

function addRow() { 
    var table = document.getElementById('dataTable'); 
    var rowCount = table.rows.length; 
    var newRow= table.insertRow(); 
    var c0 = newRow.insertCell(); 
    c0.innerHTML="<div><img src='http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg' alt='delete row' onclick='imageClick(this)'/></div>"; 
} 

// Function for deleting the parent row of a clicked image 
window.imageClick = function(img) { 
    img.parentNode.parentNode.removeChild(img.parentNode); 
}

活生生的例子：http://jsfiddle.net/HPww7/1/

來源

2012-08-01 06:01:41 Hubro

的jQuery允許更清潔，更優雅，更跨瀏覽器兼容的解決方案：

function addRow() { 
    var table = $('#dataTable'); 
    var newRow = $('<tr><td><div></div></td></tr>'); 

    // Create an image to place in the new row 
    var image = $('<img>') 
     .attr('src', 'http://0.tqn.com/d/cats/1/0/c/i/3/iStock_AngryCat425x282.jpg') 
     .attr('alt', 'delete row') 
     .on('click', function() { 
      // Delete parent row on click 
      $(this).parents('tr').remove(); 
     }); 

    // Append the image to the row and the row to the table 
    image.appendTo(newRow); 
    newRow.appendTo(table); 
}

這裏是一個活生生的例子：http://jsfiddle.net/HPww7/2/

來源

2012-08-01 06:06:50 Hubro

您可以指出OP中的任何跨瀏覽器問題嗎？ jQuery版本如何「更清潔」？或者所有這些鏈接的方法「更優雅」？它甚至不是代碼。我認爲美在我的觀察者眼中。 – RobG 2012-08-01 06:29:50

@RobG：它更優雅，因爲它包含更少的內聯HTML代碼，它實際上選擇最接近的父行而不是使用更加面向未來的祖父元素，它更具跨瀏覽器兼容性，因爲使用普通的javascript在最好的情況下是一個跨瀏覽器的雷區，並且我認爲代碼流更簡單，更易讀。 – Hubro 2012-08-01 07:04:44

如果使用表格是這樣一個雷區，你應該能夠在OP或我的答案中指出一個跨瀏覽器問題。你是對的選擇父TR，而不是一連串的parentNode屬性，但這並不難，沒有jQuery（見我的答案）。所有鏈接函數調用都是維護和調試代碼的問題。 – RobG 2012-08-02 11:24:08

在圖像，你可以這樣做：

<img onclick="deleteRow(this);" ...>

然後：

function deleteRow(el) { 
    var node = el.parentNode; 
    while (node && node.tagName.toLowerCase() != 'tr') { 
    node = node.parentNode; 
    } 
    if (node) node.parentNode.removeChild(node); 
}

上述允許圖像是在小區的任何地方，它上升到第一TR祖先，並刪除它。如果沒有一個，它什麼也不做。如果結構發生變化，則使用硬編碼的父節點字符串將引發錯誤。

來源

2012-08-01 06:26:30 RobG

在innerHTML中調用javascript函數

回答

相關問題