我想使用ajax函数为每一行添加按钮...我编写了一些代码，但效果不佳..按钮移出表格并查看页面底部的所有按钮。我想添加这些按钮到数据表行...
我想使用for循环将abc按钮一一添加到[object Object]字段
ajax 和 jquery 线
<script>
$(document).ready(function () {
$("#searchArea").hide();
var uID = $("#userName").val();
var tableProduct = $('#dataTbl').DataTable({
"bSort": true
, "oLanguage": {"sZeroRecords": "", "sEmptyTable": ""}
});
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath}/restservice/App50/' + uID,
success: function (result) {
var jString = JSON.stringify(result);
var jdata = JSON.parse(jString);
for (var x = 0; x < jdata.length; x++) {
var pa = $('#aaa');
var td1 = jdata[x].snumber;
var td2 = jdata[x].date;
var td3 = jdata[x].slsNo + " in " + jdata[x].slsiUnit;
var td4 = jdata[x].productDesc;
var td5 = jdata[x].status;
var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">');
var td7 = "jdata[x].hsCode";
var td8 = "jdata[x].hsCode";
tableProduct.row.add([td1, td2, td3, td4, td5, td6, td7, td8]).draw(true);
}
}
});
});
</script>
jsp 线
<body>
<div id="bootstrapCssTest" class="hidden"></div>
<div id="bootstrapCssTest" class="hidden"></div>
<div class="container">
<div class="row headerRow1">
<div class="col-md-12">
<jsp:include page="template/banner.jsp"/>
</div>
</div>
<div class="row">
<div class="authheader">
<%@include file="template/message.jsp" %>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
<jsp:include page="template/header.jsp"/>
</div>
<div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
<div class="row">
<div class="col-lg-12">
<div class="well lead">List of Applications</div>
</div>
</div>
<div class="row">
<input type="hidden" id="userName" value="${userID}"/>
<input type="hidden" id="recentView" value="1"/>
<div class="panel panel-default">
<div id="ribbon">Search - <p id="viewSearchCategory" style="display: inline-block" >View Recent 50 Applications</p></div>
<div id="searchArea" class="well ">
<div class="row">
VIEW RECENT
<select id="viewNumbers" name="viewNumbers">
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="750">750</option>
<option value="1000">1000</option>
</select>
APPLICATIONS
</div>
</div>
<!-- Default panel contents -->
<div style="overflow-x:auto;">
<table id="dataTbl" class="table table-bordered table-hover" style="font-size:13px;">
<thead>
<tr>
<th width="10%">SLSI Entry No</th>
<th width="10%">Application Posted in</th>
<th width="30%">SLS No and Unit</th>
<th width="30%">Product Description</th>
<th width="10%">Status</th>
<th class="hidden-print"></th>
<th class="hidden-print"></th>
<th class="hidden-print"></th>
</tr>
</thead>
</table>
</div>
<p id="aaa"></p>
</div>
</div>
</div>
</div> <jsp:include page="template/footer.jsp"/></div>
</body>
帮我一个人
最佳答案
您的代码中存在问题。您将按钮附加到表外部的 $("#aaa")。
更改此行
var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">');
至
var td6 = '<input type="button" class="btn btn-success" value="abc">';
这是一些基于您的代码的 jsfiddle 示例:https://jsfiddle.net/synz/zLykna0p/
关于javascript - 如何通过ajax和jquery在数据表中使用for循环为每一行添加按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47627041/