文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >使用jQuery的具有相同键和不同值的对象的数组

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

Stack Overflow用户
提问于 2018-04-03 22:57:52
回答 4查看 1.3K关注 0票数 2

如何显示基于对象数组的aliasName？

​

代码语言：javascript
复制
var test = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ]
代码语言：javascript
复制
<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根据表名在输入字段中显示别名。数组？

javascript
jquery
html
dom
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-04-04 03:07:49

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

​

代码语言：javascript
复制
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);
});
代码语言：javascript
复制
<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()进行删除。

​

代码语言：javascript
复制
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.");
代码语言：javascript
复制
<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>

​

或者，您可以向对象添加标志：

​

代码语言：javascript
复制
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.");
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2018-04-03 23:08:42

您可以实现选择表中的所有输入并使用foreach方法设置它，

​

代码语言：javascript
复制
var test = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ];
           
 var inputs = document.querySelectorAll('tbody input');          
 
test.forEach(function(element,index){
  inputs[index].value = element.aliasName;
});
代码语言：javascript
复制
<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>

​

无论如何，如果您为每个输入使用一些Id或类，则可以更精确……

票数 0
EN

Stack Overflow用户

发布于 2018-04-03 23:16:00

您并不真正需要jQuery来完成这项工作。您可以轻松地在JavaScript中生成整个表，如下所示：

​

代码语言：javascript
复制
var test = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ];

var html = '<table><thead><td>Table Name</td><td>Alias Name</td></thead><tbody>';
for (var i = 0; i < test.length; i++) {
  html += '<tr>';
  html += '<td>' + test[i].tableName + '</td>';
  html += '<td><input type="text" class="alias" name="alias" value="' + test[i].aliasName + '" data-table="t4" maxlength="30" /></td>'
  html += '</tr>';
}
html += '</tbody></table>';

document.getElementById("test").innerHTML = html;
代码语言：javascript
复制
<div id="test"></div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49633186

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档