ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அட்டவணை வரிசைகளில் உள்ள பொத்தான்களுக்கு மாறும் வகையில் ஐடிகளை ஒதுக்குதல்

ஜாவாஸ்கிரிப்ட் அட்டவணைகளில் உள்ள பொத்தான்களுக்கான டைனமிக் ஐடி உருவாக்கத்தைப் புரிந்துகொள்வது

ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி அட்டவணைகள் மற்றும் பொத்தான்கள் போன்ற HTML கூறுகளை மாறும் வகையில் உருவாக்கும் போது, ​​அந்த உறுப்புகளுக்கு தனிப்பட்ட ஐடிகளை ஒதுக்குவது சவாலாக இருக்கும். ஒரு அட்டவணையில் உள்ள ஒவ்வொரு வரிசைக்கும் தனித்தனியான தொடர்புகளுக்கு ஒரு தனிப்பட்ட பொத்தான் தேவைப்படும்போது இது மிகவும் முக்கியமானது. டைனமிக் ஐடிகளை ஒதுக்க முயற்சிக்கும்போது டெவலப்பர்கள் அடிக்கடி சிக்கல்களை எதிர்கொள்கின்றனர் உள் HTML ஒரு கலத்தின்.

இந்த வழக்கில், JSON பொருளிலிருந்து அட்டவணை வரிசைகளை உருவாக்குவது மற்றும் ஒவ்வொரு வரிசையிலும் உள்ள பொத்தானுக்கு ஒரு தனிப்பட்ட ஐடியை மாறும் வகையில் ஒதுக்குவதே இலக்காகும். இருப்பினும், பொதுவான அணுகுமுறைகள் டெம்ப்ளேட்டைப் பயன்படுத்துகின்றன உள் HTML எதிர்பார்த்தபடி வேலை செய்யாமல் போகலாம். ஸ்கிரிப்ட்டில் அந்த பட்டன்களைக் குறிப்பிட அல்லது தொடர்பு கொள்ள முயற்சிக்கும்போது இது சிக்கல்களை ஏற்படுத்தலாம்.

ஜாவாஸ்கிரிப்ட் செயலாக்கத்தில் சிக்கல் எழுகிறது உள் HTML மற்றும் டெம்ப்ளேட் எழுத்துக்கள். சரியான அணுகுமுறை இல்லாமல், பொத்தான்கள் ஐடி தவறாகக் காண்பிக்கப்படும் அல்லது மாறும் வகையில் புதுப்பிக்கத் தவறி, செயல்களுக்கு குறிப்பிட்ட வரிசைகளை இலக்காக வைக்க இயலாது. டைனமிக் அட்டவணை உருவாக்கத்தில் இது ஒரு பொதுவான ஆபத்து.

இந்தக் கட்டுரையில், ஒவ்வொரு வரிசையிலும் பட்டன் ஐடிகள் தனித்தனியாக இருப்பதை உறுதிசெய்யும் முறையைப் பயன்படுத்தி டேபிள் கலங்களில் உள்ள பட்டன்களுக்கு டைனமிக் ஐடிகளை சரியாக ஒதுக்குவதன் மூலம் இந்தச் சிக்கலை எவ்வாறு தீர்ப்பது என்பதை ஆராய்வோம். உங்கள் சொந்த திட்டங்களில் நீங்கள் விண்ணப்பிக்கக்கூடிய ஒரு வேலை தீர்வையும் நாங்கள் வழங்குவோம்.

ஜாவாஸ்கிரிப்டில் டைனமிக் டேபிள் ரோ மற்றும் பட்டன் ஐடி உருவாக்கம்

டைனமிக் முன்-இறுதி வளர்ச்சியில், HTML உறுப்புகளுக்கான தனிப்பட்ட ஐடிகளை உருவாக்குவது, பயனர் தொடர்புகளைக் கையாளுவதற்கு முக்கியமாகும், குறிப்பாக பல பொத்தான்கள் அல்லது உள்ளீட்டு புலங்களை வேறுபடுத்த வேண்டிய சூழ்நிலைகளில். மேலே விவாதிக்கப்பட்ட ஸ்கிரிப்டுகள் அட்டவணை வரிசைகள் மற்றும் பொத்தான்களை எவ்வாறு மாறும் வகையில் உருவாக்குவது என்பதை விளக்குகின்றன, ஒவ்வொரு பொத்தானுக்கும் அட்டவணையில் உள்ள அதன் வரிசையுடன் தொடர்புடைய தனிப்பட்ட ஐடியை ஒதுக்குகிறது. ஜாவாஸ்கிரிப்ட் லூப்கள் மற்றும் ஸ்ட்ரிங் இணைப்புகளைப் பயன்படுத்துவதன் மூலம், ஒவ்வொரு பொத்தானுக்கும் "testbutton0", "testbutton1" மற்றும் பல போன்ற தனிப்பட்ட அடையாளங்காட்டி இருப்பதை உறுதிசெய்யலாம். இது ஒரு குறிப்பிட்ட நிகழ்வைத் தூண்டும் பொத்தானை எளிதில் அடையாளம் காண அனுமதிக்கிறது, இது மாறும் உள்ளடக்க உருவாக்கத்திற்கான நடைமுறை அணுகுமுறையாக அமைகிறது.

இந்த எடுத்துக்காட்டில் பயன்படுத்தப்படும் முக்கிய செயல்பாடுகளில் ஒன்று table.insertRow(), இது ஏற்கனவே இருக்கும் HTML அட்டவணையில் புதிய வரிசைகளை செருகும். சுழற்சியின் ஒவ்வொரு மறு செய்கைக்கும், அட்டவணையில் ஒரு புதிய வரிசை சேர்க்கப்படும், அந்த வரிசையில், நாங்கள் இரண்டு கலங்களை உருவாக்குகிறோம்: ஒன்று பணியாளரின் பெயருக்கும் மற்றொன்று பொத்தானுக்கும். இரண்டாவது செல் பயன்படுத்துகிறது உள் HTML பட்டனையும் அதன் மாறும் வகையில் உருவாக்கப்பட்ட ஐடியையும் செருக. எனினும், பயன்படுத்தி உள் HTML உறுப்புகளை உருவாக்குவதற்கு அதன் வரம்புகள் உள்ளன, குறிப்பாக பொத்தான் ஐடிகள் போன்ற மாறிகளைக் குறிப்பிடும் போது, ​​இது சரியாகக் கையாளப்படாவிட்டால் பிழைகளுக்கு வழிவகுக்கும்.

மிகவும் நம்பகமான அணுகுமுறை இரண்டாவது தீர்வு பயன்பாடுகளில் நிரூபிக்கப்பட்டுள்ளது document.createElement() ஜாவாஸ்கிரிப்ட் மூலம் நேரடியாக HTML கூறுகளை உருவாக்க. இந்த முறை உறுப்புகளின் உருவாக்கத்தின் மீது சிறந்த கட்டுப்பாட்டை வழங்குகிறது மற்றும் பாதுகாப்பான, அதிக மட்டு குறியீட்டை அனுமதிக்கிறது. நிரல்ரீதியாக பொத்தான்களை உருவாக்குவதன் மூலமும், ஜாவாஸ்கிரிப்ட் மூலம் மாறும் வகையில் ஐடிகளை ஒதுக்குவதன் மூலமும், இந்தத் தீர்வு ஏற்படக்கூடிய சிக்கல்களைத் தவிர்க்கிறது உள் HTML மற்றும் உள்ளடக்கத்தை உருவாக்க தூய்மையான, பாதுகாப்பான வழியை வழங்குகிறது. கூடுதலாக, நிகழ்வைக் கேட்பவர்களை நேரடியாகப் பயன்படுத்தும் பொத்தான்களில் சேர்ப்பதை எளிதாக்குகிறது addEventListener(), இது இன்லைன் நிகழ்வு கையாளுபவர்களைத் தவிர்க்க உதவுகிறது.

இறுதியாக, சேர்த்தல் event.target.id எந்த பொத்தானைக் கிளிக் செய்யப்பட்டது என்பதைக் கண்டறிவதில் முக்கியமானது. இந்த நிகழ்வுப் பண்பு, நிகழ்வைத் தூண்டிய உறுப்பின் ஐடியைப் பிடிக்கிறது, இது தொடர்புகளின் மீது துல்லியமான கட்டுப்பாட்டை அனுமதிக்கிறது. எடுத்துக்காட்டாக, ஒரு பொத்தானைக் கிளிக் செய்யும் போது, ​​தி doSmth() செயல்பாடு பொத்தானின் ஐடியை எச்சரிக்கிறது, இது குறிப்பிட்ட பொத்தானைக் கிளிக் செய்வதன் அடிப்படையில் சரியான நடவடிக்கை எடுக்கப்படுவதை உறுதிசெய்ய உதவுகிறது. இந்த நுட்பங்களின் கலவையான டைனமிக் வரிசை உருவாக்கம், தனித்துவமான ஐடி ஒதுக்கீடு மற்றும் நிகழ்வு கையாளுதல் ஆகியவை முன் முனையில் ஊடாடும், தரவு உந்துதல் அட்டவணைகளை உருவாக்குவதற்கான சக்திவாய்ந்த தீர்வாக அமைகிறது.

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.innerHTML = json.data[i].emp_name;
    let btnId = "testbutton" + i;
    cell2.innerHTML = \`<button id="\${btnId}" onclick="doSmth()>Click Me</button>\`;
  }
}

function doSmth() {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}

// Example JSON data
const json = { data: [{ emp_name: "John Doe" }, { emp_name: "Jane Smith" }] };
buildTable(json);

// Backend - Node.js (app.js)
const express = require('express');
const app = express();
app.use(express.static('public'));

app.get('/data', (req, res) => {
  const data = [
    { emp_name: "John Doe" },
    { emp_name: "Jane Smith" }
  ];
  res.json({ data });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

// Frontend - index.html
<table id="mytesttable">
<thead>
<tr><th>Name</th><th>Action</th></tr>
</thead>
<tbody></tbody>
</table>

<script>
fetch('/data')
  .then(response => response.json())
  .then(json => buildTable(json));

function buildTable(json) {
  const table = document.getElementById("mytesttable").getElementsByTagName('tbody')[0];
  for (let i = 0; i < json.data.length; i++) {
    const newRow = table.insertRow();
    const cell1 = newRow.insertCell(0);
    const cell2 = newRow.insertCell(1);
    cell1.textContent = json.data[i].emp_name;
    const button = document.createElement('button');
    button.id = "testbutton" + i;
    button.textContent = "Click Me";
    button.addEventListener('click', doSmth);
    cell2.appendChild(button);
  }
}

function doSmth(event) {
  alert(event.target.id);
}
</script>

ஜாவாஸ்கிரிப்ட் டேபிள்களில் டைனமிக் ஐடி உருவாக்கம் மற்றும் தொடர்புகளை மேம்படுத்துதல்

ஜாவாஸ்கிரிப்ட் மூலம் அட்டவணை உள்ளடக்கத்தை மாறும் வகையில் உருவாக்கும் போது அடிக்கடி கவனிக்கப்படாத ஒரு அம்சம், அளவிடுதல் மற்றும் பராமரிக்கும் திறன் ஆகும். அட்டவணை வரிசைகளின் எண்ணிக்கை அதிகரிக்கும் போது, ​​செயல்திறன் பாதிக்கப்படலாம், குறிப்பாக DOM தொடர்ந்து புதுப்பிக்கப்பட்டால் அல்லது மீண்டும் கட்டமைக்கப்பட்டால். செயல்திறனை மேம்படுத்த, DOM இல் சேர்ப்பதற்கு முன், ஒரு ஆவணப் பகுதியைப் பயன்படுத்தி, முழு டேபிள் கட்டமைப்பையும் முதலில் நினைவகத்தில் உருவாக்குவதன் மூலம் நேரடி DOM கையாளுதல்களின் எண்ணிக்கையைக் குறைக்கலாம். இது ரிஃப்ளோ மற்றும் ரீபெயின்ட் செயல்முறைகளை குறைக்கிறது, இது பெரிய அளவிலான பயன்பாடுகளை மெதுவாக்கும்.

டைனமிக் டேபிள் உருவாக்கத்தில் உள்ள மற்றொரு முக்கியமான அம்சம், நிகழ்வுப் பிரதிநிதித்துவத்தை நீங்கள் எப்படிக் கையாளுகிறீர்கள் என்பதுதான். ஒவ்வொரு பொத்தானுக்கும் தனிப்பட்ட நிகழ்வு கேட்பவர்களைச் சேர்ப்பது சிறிய அட்டவணைகளுக்கு நன்றாக வேலை செய்யும் அதே வேளையில், இது பெரிய தரவுத்தொகுப்புகளில் செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும். அதற்குப் பதிலாக, நிகழ்வுப் பிரதிநிதித்துவத்தைப் பயன்படுத்துவது, பெற்றோர் உறுப்பில் (அட்டவணை போன்றது) நிகழ்வுகளைக் கேட்கவும், பொத்தான் கிளிக்குகளை மிகவும் திறம்படச் செய்யவும் உங்களை அனுமதிக்கிறது. இந்த வழியில், நீங்கள் ஒரே ஒரு நிகழ்வு கேட்பவரை அட்டவணையில் இணைக்கிறீர்கள், மேலும் கிளிக் செய்யப்பட்ட உறுப்பின் ஐடியின் அடிப்படையில், சரியான நடவடிக்கையை நீங்கள் தீர்மானிக்கலாம்.

கடைசியாக, அணுகல் என்பது கவனிக்கப்படக் கூடாத மற்றொரு காரணியாகும். பொத்தான்கள் அல்லது பிற ஊடாடும் கூறுகளை மாறும் வகையில் உருவாக்கும் போது, ​​உதவி தொழில்நுட்பங்களைப் பயன்படுத்துபவர்கள் உட்பட, ஒவ்வொரு உறுப்பும் அனைத்து பயனர்களுக்கும் அணுகக்கூடியதாக இருப்பதை உறுதி செய்வது அவசியம். பொருத்தமானதைச் சேர்ப்பதன் மூலம் ஏரியா-லேபிள்கள் அல்லது பாத்திரங்கள் பொத்தான்களுக்கு, நீங்கள் இன்னும் உள்ளடக்கிய பயனர் அனுபவத்தை வழங்க முடியும். மேலும், ஸ்கிரீன் ரீடர்கள் அல்லது விசைப்பலகை வழிசெலுத்தல் மூலம் உங்கள் டேபிளைச் சோதிப்பது, மிகவும் ஆற்றல் வாய்ந்த, அணுகக்கூடிய இணையப் பயன்பாட்டில் கூறுகள் எவ்வாறு தொடர்பு கொள்கின்றன என்பதில் ஏதேனும் சிக்கல்களைக் கண்டறிய உதவும்.