वस्तुओं की सरणी के आधार पर 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>

परीक्षण का उपयोग कर तालिका नाम के आधार पर इनपुट फ़ील्ड में उपनाम नाम कैसे प्रदर्शित करें। सरणी?

2
user1495394 3 अप्रैल 2018, 17:57

4 जवाब

सबसे बढ़िया उत्तर

आप .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>
0
Stephen Docy 20 अप्रैल 2018, 07:32

यदि आप 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>
0
Deepu Reghunath 6 जून 2018, 19:55

इसके लिए आपको वास्तव में jQuery की आवश्यकता नहीं है। आप आसानी से पूरी तालिका को जावास्क्रिप्ट में इस तरह उत्पन्न कर सकते हैं:

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>
0
Racil Hilan 3 अप्रैल 2018, 15:15

आप अपनी तालिका के अंदर अपने सभी इनपुट का चयन कर सकते हैं और इसे फ़ोरैच विधि से सेट कर सकते हैं,

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;
});
<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
Renzo Calla 3 अप्रैल 2018, 15:08