Posted In: Java Script, jQuery

jQuery – Add dynamic rows in a table and read input values

Find all input of td inside a TR in jquery

Dynamic rows example

Table HTML


<table id="lwfsKvTable"
 class="table table-striped table-bordered" 
 style="border-collapse: separate; border-spacing: 1em;"
 width="100%">
 <thead>
 <tr>
 <th>Key</th>
 <th>Value</th>
 </tr>
 </thead>
</table>

Code to add new row


var kvtrCnt = 0;
function createKvsHtmlRow() {
	var newRow = $("<tr>");
	var cols = "";

	cols += '<td width="12%">'
	cols += '<input type="text" class="form-control" name="keyValues[' + kvtrCnt + '].key" value=""/></td>';
	cols += '<td width="12%">'
	cols += '<input type="text" class="form-control" name="keyValues[' + kvtrCnt + '].value" value=""/></td>';

	newRow.append(cols);
	$("#lwfsKvTable").append(newRow);
	kvtrCnt++;
}

Code to read all input text from table


function readRows() {
	$("#lwfsKvTable").find("input:text").each(function() {
		console.log($(this).val());
	});
}

by , on September 9th, 2017

  • Categories