我正在尝试使用按钮单击将文本框值添加到表中。但我不知道ajax.please检查我的代码。我的ajax部分是否正确？有谁可以帮助我？
var roleList=[{
"no" :"1",
"name":"xxx",
"dlt" :"Delete"
},
{
"no" :"2",
"name":"yyy",
"dlt" :"Delete"
}
];
$(document).ready(function(){
for(var i=0;i<roleList.length;i++)
{
var table='<tr><td>'+roleList[i].no+'</td><td>'+roleList[i].name+
'</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>';
$('#roleListTable').append(table)
}
});
我试过了：
if (name != null) {
$.post("",{empRoleList:roleList},
function(data){
if (data != 0) {
alert("success");
$('#name').each(function () {
$(this).val('');
});
var ajxObj = { name: "Personal", id: 0 };
$.ajax({
type: 'POST',
url: "",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(ajxObj),
dataType: 'html',
success: function (response) {
$('#roleListTable').html(response);
// $('#grdUser').show();
},
failure: function (response) {
alert(response.responseText);
}
});
}
else { alert("Fail"); }
});
}
答案 0 :(得分：1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<?php
//$status = "Pending"; it has to be defined before here.
if ($status == 'Approved' )
$whatscolor = 'color: green';
else if ($status == 'Cancelled' )
$whatscolor = 'color: red';
else if ($status == 'Pending' )
$whatscolor = 'color: blue';
?>
<style>
body {
<?php echo $whatscolor; ?>
}
</style>
</head>
<body>
Content of the document......
</body>
</html>
var roleList=[{
"no" :"1",
"name":"xxx",
"dlt" :"Delete"
},
{
"no" :"2",
"name":"yyy",
"dlt" :"Delete"
}
];
$(document).ready(function(){
for(var i=0;i<roleList.length;i++)
{
var table='<tr><td>'+roleList[i].no+'</td><td>'+roleList[i].name+
'</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>';
$('#roleListTable').append(table)
}
function submit(){
var name = $(".name").val();
var ajxObj = { name: name , id: 0 };
$.ajax({
type: 'POST',
url: "",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(ajxObj),
dataType: 'html',
success: function (response) {
$('#roleListTable').html(response);
$('#rolesForm')[0].reset();
co(resonse)
},
failure: function (response) {
alert(response.responseText);
}
});
}
});
//get the data and populate in the table
function getData(){
$.ajax({
url: '',
type:'post'
data: {},
dataType: "json",
cache: false,
success: function (jsonResponse) {
$.each(jsonResponse, function (key, val) {
var table='<tr><td>'+key+'</td><td>'+val+
'</td><tr>';
$('#roleListTable').append(table)
});
}
});
}
答案 1 :(得分：0)
This may solve your problem..check the link..
<html>
<head>
<script>
var roleList=[{
"no" :"1",
"name":"xxx",
"dlt" :"Delete"
},
{
"no" :"2",
"name":"yyy",
"dlt": "Delete"
}
];
$(document).ready(function () {
for (var i = 0; i < roleList.length; i++) {
var table = '<tr><td>' + roleList[i].no + '</td><td>' + roleList[i].name +
'</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>' + roleList[i].dlt + '</button></td><tr>';
$('#roleListTable').append(table)
}
$('#save').on('click', function (e) {
var table = '<tr><td>' + $("#name").val() + '</td><td>' + $("#description").val() + '</td><tr>';
$('#roleListTable').append(table)
});
});
</script>
</head>
<body>
<div class="col-lg-12 col-md-12 col-xs-12 padding table-responsive">
<table class="table">
<thead class="roleListTableHead">
<tr>
<td>no</td>
<td>emp id</td>
</tr>
</thead>
<tbody id="roleListTable">
</tbody>
</table>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 padding">
<label class="col-lg-2 col-md-2 col-x-2"> Name</label>
<input type="text" name="name" id="name" class="col-lg-6 col-md-6 col-xs-12">
</div>
<div class="col-lg-12 col-md-12 col-xs-12 padding">
<label class="col-lg-2 col-md-2 col-x-2">Description</label>
<textarea type="text" name="description" id="description" class="col-lg-6 col-md-6 col-xs-12"></textarea>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 padding pull">
<span class="pull-right">
<button class="btn save " id="save" data-toggle="modal" data-target="#save"><i class="fa fa-floppy-o"></i>Save
</button>
<button class="btn cancel "><i class="fa fa-ban"></i>Cancel</button>
</span>
</div>
</body>
</html>
答案 2 :(得分：0)
您可以将文本框值添加到表中，点击按钮就可以了。
$(document).ready(function(){
$('#add').on('click',function(){
var name = $('#name').val(); //Getting the value of name field
var description = $('#description').val(); //Getting the value of description field
var tableData = '';
tableData += '<tr><td>'+name+'</td><td>'+description+'</td></tr>';
$('#tbody').append(tableData);
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Ajax</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form>
<div class="form-group col-md-8">
<label for="name">Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter name">
</div>
<div class="form-group col-md-8">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" placeholder="Enter description">
</div>
<div class="col-md-8">
<button type="button" id="add" class="btn btn-default">Add</button>
</div>
</form>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</body>
</html>
答案 3 :(得分：0)
var roleList=[{
"no" :"1",
"name":"xxx",
"dlt" :"Delete"
},
{
"no" :"2",
"name":"yyy",
"dlt" :"Delete"
}
];
$(document).ready(function(){
for(var i=0;i<roleList.length;i++)
{
var table='<tr><td>'+roleList[i].no+'</td><td>'+roleList[i].name+
'</td><td><button class="btn dlt" data-toggle="modal" data-target="#confirm"><i class="fa fa-trash-o"></i>'+roleList[i].dlt+'</button></td><tr>';
$('#roleListTable').append(table)
}
function submit(){
var name = $(".name").val();
var ajxObj = { name: name , id: 0 };
$.ajax({
type: 'POST',
url: "",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(ajxObj),
dataType: 'html',
success: function (response) {
$('#roleListTable').html(response);
$('#rolesForm')[0].reset();
co(resonse)
},
failure: function (response) {
alert(response.responseText);
}
});
}
});<div class="col-lg-12 col-md-12 col-xs-12 padding">
<form action=" " method="post" id="rolesForm">
<label class="col-lg-2 col-md-2 col-x-2"> Name</label>
<input type="text" name="name" id="name" class="col-lg-6 col-md-6 col-xs-12 name">
</form>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 padding">
<label class="col-lg-2 col-md-2 col-x-2">Description</label>
<textarea type="text" name="description" id="description" class="col-lg-6 col-md-6 col-xs-12"></textarea>
</div>
<div class="col-lg-12 col-md-12 col-xs-12 padding pull">
<span class="pull-right">
<button class="btn save " id="save" onclick="submit"><i class="fa fa-floppy-o"></i>Save
</button>
</span>
</div>