Question

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

＆＃13;

var test = [{tableName:"EMP", aliasName:"E1"},
            {tableName:"EMP", aliasName:"E2"},
            {tableName:"DEPT", aliasName:"D"},
            {tableName:"EMP", aliasName:""},
           ]

＆＃13;

<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>

＆＃13;

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

Answer 1

您可以在表格中选择所有输入并使用foreach方法

进行设置

＆＃13;

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;
});

＆＃13;

<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>

＆＃13;

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

Answer 2

你真的不需要jQuery。您可以使用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;

<div id="test"></div>

Answer 3

如果使用可以解决问题的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>

Answer 4

您可以动态创建条目，在您的情况下更可靠。

<强>样本

<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>
<script>
    var test = [{ tableName: "EMP", aliasName: "E1" },
    { tableName: "EMP", aliasName: "E2" },
    { tableName: "DEPT", aliasName: "D" },
    { tableName: "EMP", aliasName: "" },
    ];
    let tbody = $('tbody');
    let html;
    for (let { tableName: name, aliasName: alias } of test) {
        html += `<tr>
            <td>${name}</td>
            <td>
                <input type="text" class="alias" name="alias" data-table="t4" maxlength="30" value="${alias}">
            </td>
            </tr>`;
    }
    tbody.html(html)
</script>

Answer 5

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

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>

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);
});

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

<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);
  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.");

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

5 个答案: