我尝试在我的页面中包含一个脚本来添加动态行,每次点击添加时,都会将数据保存在数据库中。
问题是当我插入数据并单击添加行时,不起作用。 如何正确写出这个元素?
<div class="mainTitle">Write a customer question : Intent</div>
<div class="adminformTitle">
<div class="form-group form-group-options col-md-12">
';
$content .= '
<table id="myTable" class="table table-sm table-hover order-list">
<thead>
<tr>
<td>User Question</td>
<td>Language</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-9">
' . HTML::inputField('user_question', null, 'placeholder="Write a short answer"'). '
</td>
<td class="col-md-2">
' . HTML::inputField('language', null, 'placeholder="Language"'). '
</td>
<td class="col-sm-1"><a id="delete_row" class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
';
脚本:: 单击时,它会添加一个新行并在函数中保存/删除数据
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="user_question' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="language' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
// call files
$.ajax({
type: 'POST',
url: 'ajax.php',
success: function(data) {
alert(data);
$("p").text(data);
}
});
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
});
</script>