我有一个$ .ajax（）请求正常工作，但我需要得到4个值（name，clientid，url，id）＆lt; td＆gt;。 $ .val（）不起作用，因为它只适用于输入。
我需要从动态追加的行中获取名称，客户端ID，url和id。我需要这些值，所以，当我点击所选行的编辑按钮时，它会保存我所做的更改。
我该如何获得价值？使用 $。html（）？的 $。文本（）
HTML
<div class="row">
<div class="col-md-12 overflow-table">
<table class="table" id="table">
<thead class="head-color thead-inverse">
<tr>
<th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
<th>CLIENT-ID</th>
<th>URL</th>
<th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
</tr>
</thead>
<tbody id='table-redirect'>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
<tr class='lightgrey'>
</tr>
</tbody>
</table>
</div>
</div>
JavaScript的：
//change table content
$(document).on('click', '#editButton', function(e) {
var url = "http://mobisteinlp.com/redirect/redirect";
var name = $('#name1').val();
console.log(name);
var clientId = $('#client_id1').val();
console.log(clientId);
var redirectUrl = $('#url1').html();
console.log(redirectUrl);
var id = $('#hidden').val()
console.log(id);
var formData = new FormData();
formData.append('name1', name);
formData.append('client_id1', clientId);
formData.append('url1', redirectUrl);
formData.append('id', id);
console.log('test');
$.ajax({
url: url + "/editRedirect",
type: "POST",
dataType: "json",
data: formData,
contentType: false,
cache: false,
processData: false,
success: function(obj) {
var name, clientId, redirectUrl, id;
var rows = '';
$("tbody").empty('');
for (i = 0; i < obj.length; i++) {
rows += "<tr class='lightgrey'><th contenteditable='true'>" + obj[i].name + "</th><td>" + obj[i].client_id + "</td><td contenteditable='true' >" + obj[i].url + "</td><td><button type='button' id='editButton' class='btn btn-info'" + obj[i].client_id + "'><img class='col-md-2 edit nopad float-right' src='http://mobisteinlp.com/redirect/public/img/edit.svg'></button><a href='http://mobisteinlp.com/redirect/public/click.php/?id='" + obj[i].id + "'><img class='col-md-2 link nopad float-right' src='http://mobisteinlp.com/redirect/public/img/copy.svg'></a></td></td></tr>";
console.log('sucess!');
console.log(obj);
}
$("#table").append(rows);
},
error: function() {
console.log('error');
}
}); //END /editRedirect $.ajax()
}); //END $(document).on('click','#change',function(e)
答案 0 :(得分：1)
.text()方法将只返回元素中的文本。
.html()方法将返回文本，以及可能包含在元素中的任何HTML。
e.g。如果您的<td>出于任何原因看起来像这样：
<th class="clientID"><span>12345</span></th>
然后：
$(".clientID").text();将返回12345
$(".clientID").html();将返回<span>12345</span>
因此，出于您的目的，您应该使用.text()来获取要发送到服务器的实际文本内容。
您也可以通过自己的测试轻松地在jQuery文档中检查所有这些内容。
现在，要在特定单击的行中获取值，您需要按标记中的行上下文进行限制。在“点击”事件中，this将是点击的按钮，该按钮位于<tr>内。相应的数据也在<tr>。
因此，您可以使用<tr>作为包含按钮和数据的最近元素。然后，如果您给每个<td>一个与其代表的内容相对应的类（客户端ID，网址等），就像我上面所做的那样，您可以执行以下操作：
var tr = $(this).closest("tr"); //get the parent tr
var clientID = tr.find(".clientID").text(); //get the client ID text within the tr
var url = tr.find(".url").text(); //same for url, etc...
最后，您的按钮点击将无法正常工作，因为您正在复制ID。它只适用于第一个按钮。
将<button type='button' id='editButton' class='btn btn-info'更改为<button type='button' class='btn btn-info editButton'（使用课程而不是ID）
并将$(document).on('click', '#editButton', function(e) {更改为$(document).on('click', '.editButton', function(e) {（只需将#更改为.）
答案 1 :(得分：1)
1）您附加了具有重复ID的多行。对于每个元素，id应该是唯一的。只使用类名而不是id。
2）追加一个额外的td
<th contenteditable='true'>" + obj[i].name + "</th>
使用班级名称
更新了代码` <tr class='lightgrey'>
<td contenteditable='true' class="name">" + obj[i].name + "</td>
<td class="client_id">" + obj[i].client_id + "</td>
<td contenteditable='true' class="url" >" + obj[i].url + "</td>
<td>
<button type='button' class='btn btn-info editButton'" + obj[i].client_id + "'>
<img class='col-md-2 edit nopad float-right' src='http://mobisteinlp.com/redirect/public/img/edit.svg'>
</button><a href='http://mobisteinlp.com/redirect/public/click.php/?id='" + obj[i].id + "'>
<img class='col-md-2 link nopad float-right' src='http://mobisteinlp.com/redirect/public/img/copy.svg'></a>
</td>
</tr>`
Jquery：
为每个td设置类名并遍历并像这样轻松访问
`$(document).on('click', '.editButton', function(e) {
var tr = $(this).closest("tr");
var client_id = tr.find(".client_id").text();
var url = tr.find(".url").text();
var name = tr.find(".name").text();
});`
答案 2 :(得分：0)
获取这些命令之间的差异，然后您可以自己修复 以下用于从值属性（通常是输入标记）中检索数据。
//此处id是元素的id名称
$('#id').val();
如果您想从您需要使用的元素中获取数据
1。这将返回元素内的文本。
$('#id').text()
2。这将返回元素内的html。
$('#id').html()
希望它对你有所帮助。
答案 3 :(得分：-1)
试一试......
$("#ObjectsTable").find("tr:gt(0)").remove();
var arr = $.parseJSON(data);
$.each(arr, function(index,value) {
$('#ObjectsTable')
.append($("<tr>" +
"<td>" + value.ID + "</td>" +
"<td>" + value.Model + "</td>" +
"<td>" + value.Type + "</td>" +
"<td>" + value.Color + "</td>" +
"<td>" + value.Price + "</td>" +
"</tr>"));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="ObjectsTable" class="responstable">
<tr>
<th>ID</th>
<th>Model</th>
<th>Type</th>
<th>Color</th>
<th>Price</th>
</tr>
</table>