如何找到ID与json键匹配的表tr并填充其他列

时间:2021-02-14 20:11:29

I am new to JQuery and Json and I am stumbled into some problem. Appreciate it very much if anyone could offer me some help. My problem is as follow:

In my JSP, I have ajax call that will return me json object. I want to get the keys in my json object, find those tr in my table that its ID match with the the keys, and ultimately populate other column in that particular row with the value from my json object.

Here is my jquery ajax call

我是JQuery和Json的新手,我偶然发现了一些问题。如果有人能给我一些帮助,那就非常感激。我的问题如下:在我的JSP中,我有一个ajax调用,它将返回给我json对象。我想获取我的json对象中的键,在我的表中找到它的ID与键匹配的tr,并最终用我的json对象中的值填充该特定行中的其他列。这是我的jquery ajax调用

    $.ajax({
....
....
success:function(data) {    
//Data is a Json Object. The value is for example :{"A":"1","B":"2","C":"3"}    
for(key in data) {
    $("#myTable tr").find(key).find("td").eq(1).html(data[key]); // not working!
}
}
});

, I have the following html blocks:

,我有以下html块:

<table id = "myTable">
    <tr id = "A">
      <td>Descriptopn.</td>
 <td>...</td> // I want to set this value to be 1
    </tr>

    <tr id = "B">
 <td>Description</td>
 <td>...</td> // I want to set this value to be 2
    </tr>

     <tr id = "C">
  <td>Description</td>
       <td>...</td> // I want to set this value to be 3
</tr>   
 </table> 

My problem is the above syntax is not working. Is there a way I can make this thing right? Thank you.

我的问题是上面的语法不起作用。有没有办法让这件事做对了?谢谢。

3 个解决方案

#1


2  

Since you have the id (and it should be unique!), you can just use the following:-

既然你有id(它应该是唯一的!),你可以使用以下内容: -

$('#' + key).find('td:eq(1)').text(data[key]);

Here's a fiddle

这是一个小提琴

#2


3  

.find() searches each matched element for a descendant which matches the given selector. Since you want to search for descendants of the table, rather than descendants of the rows, get rid of the tr in your original selector. Then, prepend a '#' mark to the key to make it a valid id selector, and the rest will work as expected.

.find()在每个匹配的元素中搜索与给定选择器匹配的后代。由于您要搜索表的后代,而不是行的后代,因此请删除原始选择器中的tr。然后,在键前加一个'#'标记,使其成为有效的id选择器,其余的将按预期工作。

for(var key in data) {
    $("#myTable").find('#'+key).find("td").eq(1).html(data[key]); // working!
}

#3


0  

$.each(data, function(i, val){

     $('#myTable tr#' + i).find('td:last').text(val);
 });

#1


2  

Since you have the id (and it should be unique!), you can just use the following:-

既然你有id(它应该是唯一的!),你可以使用以下内容: -

$('#' + key).find('td:eq(1)').text(data[key]);

Here's a fiddle

这是一个小提琴

#2


3  

.find() searches each matched element for a descendant which matches the given selector. Since you want to search for descendants of the table, rather than descendants of the rows, get rid of the tr in your original selector. Then, prepend a '#' mark to the key to make it a valid id selector, and the rest will work as expected.

.find()在每个匹配的元素中搜索与给定选择器匹配的后代。由于您要搜索表的后代,而不是行的后代,因此请删除原始选择器中的tr。然后,在键前加一个'#'标记,使其成为有效的id选择器,其余的将按预期工作。

for(var key in data) {
    $("#myTable").find('#'+key).find("td").eq(1).html(data[key]); // working!
}

#3


0  

$.each(data, function(i, val){

     $('#myTable tr#' + i).find('td:last').text(val);
 });