使用jQuery具有相同键和不同值的对象数组?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (144)

如何aliasName根据对象数组显示?

var test = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
  <td>Table Name</td>
  <td>Alias Name</td>
</thead>
<tbody>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>DEPT</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
</tbody>
</table>

如何使用test基于表名在输入字段中显示别名。阵列?

提问于
用户回答回答于

你可以使用.each()并使用其索引来帮助你获取所需的数组元素。

var arr = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ];
           
$("tbody tr").each(function(index){
  console.log(index + " : " + arr[index].aliasName);
  $(this).find("input").val(arr[index].aliasName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
  <td>Table Name</td>
  <td>Alias Name</td>
</thead>
<tbody>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>DEPT</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
</tbody>
</table>

或者,如果要动态搜索,则需要搜索并删除正在使用的值以防止重复。可以使用.find()进行搜索,使用.splice()进行删除。

var arr = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ];
           
$("tbody tr").each(function(index){
  let td = $(this).find("td").text();
  let obj = arr.find(x => x.tableName === td);
  arr.splice(arr.indexOf(obj), 1);
  $(this).find("input").val(obj.aliasName);
});

console.log("Array after example with .splice() have " + arr.length + " elements.");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
  <td>Table Name</td>
  <td>Alias Name</td>
</thead>
<tbody>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>DEPT</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
</tbody>
</table>

或者你可以向对象添加标志:

var arr = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ];
           
$("tbody tr").each(function(index){
  let td = $(this).find("td").text();
  let obj = arr.find(x => x.tableName === td && !x.used);
  if(obj !== undefined){
    obj.used = true;
    $(this).find("input").val(obj.aliasName);
  }
});

console.log("Array after example with flag have " + arr.length + " elements.");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
  <td>Table Name</td>
  <td>Alias Name</td>
</thead>
<tbody>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
  <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>DEPT</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
   <tr>
    <td>EMP</td>
    <td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30"></td>
  </tr>
</tbody>
</table>
用户回答回答于

如果你使用jquery来解决问题

$( document ).ready(function() {
var test = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ];           
test.forEach(function(item){
  $("tbody").append('<tr>'+
      "<td>"+item.tableName+"</td>"+
      '<td><input type="text" class="alias" name="alias" data-table="t4" maxlength="30" value="'+item.aliasName+'"/></td>'+
      '</tr>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
  <td>Table Name</td>
  <td>Alias Name</td>
</thead>
<tbody>
    
</tbody>
</table>

扫码关注云+社区

领取腾讯云代金券