Java Script：在表格中動態添加文本字段和按鈕

-2

我有一個按鈕以及一個表格行。當我點擊按鈕時，應該在表格中添加新行，並且按鈕應該存在於新添加的行中.refer圖片 enter image description here Java Script：在表格中動態添加文本字段和按鈕

來源

2015-06-12 Rajeev Akotkar

你有任何的代碼？你有什麼嘗試？ – Soma

請先創建一個樣本。 – nikhil

http://viralpatel.net/blogs/dynamically-add-remove-rows-in-html-table-using-javascript/ – vrajesh

下面是一個快速解決方案，可以添加帶有按鈕的新行並添加新行。

你沒有添加任何代碼，但這個工程。

https://jsfiddle.net/scheda/Lhsvmqoy/

var b = document.querySelector('.clicky') 
var table = document.querySelector('table'); 
var insert_this = '<tr><td><input type="text" placeholder="Look ma!"/><button class="clicky">Add more stuff</button></td></tr>'; 

document.querySelector('body').addEventListener('click', function(e) { 
    if (e.target.className === 'clicky') { 
     table.innerHTML += insert_this; 
    } 
});

來源

2015-06-12 13:46:43 Scheda

像您期望這應該工作：

<!DOCTYPE html> 
<head> 
    <style> 
     td,table{border:solid 1px;} 
    </style> 
    <title>Table sample </title>  
</head> 
<body> 
<table id="myTable"> 
    <tr> 
     <td>Row 1</td><td></td> 
    </tr> 
    <tr> 
     <td>Row 2</td><td><button id="newRow">New Row (original button)</button></td> 
    </tr> 
</table>   
</body> 

<script> 
    function addRow() { 
    // Get a reference to the table 
    var tableRef = document.getElementById('myTable'); 

    // Insert a row in the table at the end 
    var newRow = tableRef.insertRow(tableRef.rows.length); 

    // Insert a cell in the row at index 0 
    var newCell = newRow.insertCell(0); 
    newCell.innerHTML="Row " + tableRef.rows.length; 
    var newCell = newRow.insertCell(1); 

    // Append button node to the cell 
    var newButton = document.getElementById('newRow'); 
    newCell.appendChild(newButton); 
} 

function addEvent(elem, event, fn) { 
    if (elem.addEventListener) { 
     elem.addEventListener(event, fn, false); 
    }else { 
     elem.attachEvent("on" + event, function() { 
     // set the this pointer same as addEventListener when fn is called 
      return(fn.call(elem, window.event)); 
     }); 
    } 
} 
var mybutton = document.getElementById("newRow"); 
addEvent(mybutton,"click",addRow); 
</script> 
</html>

來源/學分：使用addEventListener功能：adding event listener cross browser

添加行功能（改）： https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow

來源

2015-06-12 15:03:58 Allende

Java Script：在表格中動態添加文本字段和按鈕

回答

相關問題