2015-06-12 2 views
-2

У меня есть кнопка, а также в строке таблицы. Когда я нажимаю кнопку, в таблице должна быть добавлена ​​новая строка, и кнопка должна присутствовать в новой добавленной строке .refer картинка enter image description hereJava Script: динамически добавлять текстовое поле и кнопку в таблицу

+0

У вас есть код? Что вы пробовали? – Soma

+0

Сначала создайте образец. – nikhil

+0

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

ответ

0

Это быстрое решение для добавления новых строк с кнопками, которые также будут добавлять новые строки.

Вы не добавили кода, но это работает.

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; 
    } 
}); 
0

Это должно работать, как вы ожидаете:

<!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

Смежные вопросы