首页
学习
活动
专区
工具
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根据表名在输入字段中显示别名。数组?

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

复制
相关文章

相似问题

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