javascript - atscript - स्क्रिप्टिंग भाषा



HTML और जावास्क्रिप्ट डायनामिक तालिका के साथ समस्याएं (1)

मैंने थोड़ा आपका कोड पुन: लागू किया और एक नया जेएसफ़िल्ड बनाया। आप इसे अधिक से अधिक रीफ़क्टर कर सकते हैं, और यदि संभव हो तो अपनी प्रोजेक्ट में jQuery डालें, तो आप बस इसे बहुत अधिक करेंगे।

तो कुछ नोट्स:

1) अपने यूआई परिवर्तनों के साथ आपको अद्यतित रहें। पहले नमूने में आप HTML को जोड़ तोड़ रहे थे लेकिन आप सरणी मॉडल को अद्यतन नहीं कर रहे थे

2) पुनरावृत्ति से बचने के लिए, अपने सामान्य कोड को कार्य में रखने की कोशिश करें। उदाहरण के लिए, मैं एक फ़ंक्शन के अंदर पंक्ति बनाने के लिए तर्क को स्थानांतरित कर दिया और हर बार उस फ़ंक्शन को एक नई पंक्ति बनाने की आवश्यकता (प्रारंभ में प्रदर्शित करने के लिए और पंक्ति जोड़ने पर क्लिक करते समय)

3) जब आप पंक्ति में अपने कार्यों को कॉल करते हैं, तो वर्तमान HTML तत्व भी पास करें। आप इसे पता कर सकते हैं कि किस वर्तमान HTML तत्व को क्लिक किया गया है, ताकि आप उस पंक्ति को आसानी से हेरफेर कर सकें

4) दो tbodies का उपयोग करें डेटा के लिए और कार्यों के लिए दूसरा एक यह क्रियाओं से अलग-अलग आंकड़ों को आसान बनाता है, हर बार कार्रवाई करने के लिए उस पंक्ति को दोहराने से परहेज करता है

और कुछ अन्य चीजें जो आप अकेले कोड के साथ जांच सकते हैं।

आपको सही संचालन के बटन को अक्षम करने का सिर्फ तर्क को प्रबंधित करना है, उदाहरण के लिए से बचने के लिए जब संपादन करते समय फिर से संपादित करें क्लिक करें, लेकिन यह अपने आप को करने के लिए एक अच्छा व्यायाम होगा :)

यहां नमूना:

var myArray = [{
  "name": "aaa",
  "level": "A"
}, {
  "name": "bbb",
  "level": "B"
}, {
  "name": "ccc",
  "level": "C"
}];

function createDataRow(el, ind) {
  var row = document.createElement('tr');
  row.id = 'row-' + ind;
  var cell1Content = `
  	<div class="name-content">${el.name}</div>
    <input class="name-edit" type="text" id="name-text-${ind}" value="${el.name}" style="display:none;">
  `;
  
  var cell2Content = `
  	<div class="level-content">${el.level}</div>
  	<select class="level-edit" id="levels-list-${ind}" style="display:none;">
      <option value="A">A</option>\
      <option value="B">B</option>\
      <option value="C">C</option>\
    </select>
  `;
  
  var cell3Content = `
    <input type="button" id='edit_button" + i + "' value="Edit" class="edit" onclick="editRow(this, ${ind})">
    <input type="button" id='save_button" + i + "' value="Save" class="save" onclick="saveRow(this, ${ind})">
    <input type="button" value="Delete" class="delete" onclick="deleteRow(this, ${ind})">
  `;
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  
  cell1.innerHTML = cell1Content;
  cell2.innerHTML = cell2Content;
  cell3.innerHTML = cell3Content;
  
  document.getElementById('table-data').appendChild(row);
}

function displayData() {
  myArray.forEach(function(el, ind) {
  	createDataRow(el,ind);
  });
}

function deleteRow(el, ind) {
	el.parentElement.parentElement.parentElement.removeChild(el.parentElement.parentElement); 
  myArray.splice(ind, 1);
}

function addRow(){
  event.preventDefault();
  var newEl = {
  	"name": document.getElementById("name-text").value,
    "level": document.getElementById("levels-list").value
  };
  myArray.push(newEl);
  createDataRow(newEl, myArray.length - 1);
  document.getElementById("name-text").value = '';
  document.getElementById("levels-list").value = 'A';
}//end addRow

function editRow(el, ind)
{
	var currentRow = el.parentElement.parentElement;
  
  currentRow.cells[0].getElementsByClassName("name-content")[0].style.display = 'none';
  currentRow.cells[0].getElementsByClassName("name-edit")[0].style.display = 'block';
  
  currentRow.cells[1].getElementsByClassName("level-content")[0].style.display = 'none';
  currentRow.cells[1].getElementsByClassName("level-edit")[0].value = myArray[ind].level;
  currentRow.cells[1].getElementsByClassName("level-edit")[0].style.display = 'block';
}
 //end deleteRow

function saveRow(el, ind)
{
	var currentRow = el.parentElement.parentElement;
  
  var nameContent = currentRow.cells[0].getElementsByClassName("name-content")[0];
  var nameEdit = currentRow.cells[0].getElementsByClassName("name-edit")[0];
  nameContent.innerHTML = nameEdit.value;
  nameContent.style.display = 'block';
  nameEdit.style.display = 'none';
  
  var levelContent = currentRow.cells[1].getElementsByClassName("level-content")[0];
  var levelEdit = currentRow.cells[1].getElementsByClassName("level-edit")[0];
  levelContent.innerHTML = levelEdit.value;
  levelContent.style.display = 'block';
  levelEdit.style.display = 'none';
  
  myArray[ind].name = nameEdit.value;
  myArray[ind].level = levelEdit.value;
}//end saveRow

var addButton=document.getElementById("add-button");
addButton.addEventListener('click', addRow, false);
displayData();
<body>
  <div id="wrapper">
    <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
      <thead>
        <tr>
          <th>Name</th>
          <th>Level</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="table-data">
      </tbody>
      <tbody id="table-rows">
        <tr>
          <td><input type="text" id="name-text"></td>
          <td>
            <select name="levels-list" id="levels-list">
              <option value="A" id="option-1">A</option>
              <option value="B" id="option-2">B</option>
              <option value="C" id="option-3">C</option>
            </select>
          </td>
          <td><input type="button" class="add" value="Add Row" id="add-button"></td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

और यहां Jsfiddle (इस समय बचाया: डी):

https://jsfiddle.net/u0865zaa/8/

मुझे उम्मीद है यह मदद करेगा। किसी भी प्रश्न के लिए मुझे बताएं

मुझे इसमें समस्याएं आ रही हैं: 1) फ़ंक्शन सेव रोवा पंक्ति को नहीं सहेजता है मुझे यह त्रुटि मिलती है: Uncaught TypeError: Cannot set property name of undefined at at saveRow at HTMLInputElement.onclickUncaught TypeError: Cannot set property name of undefined at at saveRow at HTMLInputElement.onclick । 2) deleteRow काम नहीं करता है मुझे एक समान त्रुटि मिलती है: Uncaught TypeError: Cannot set property 'innerHTML' of null एरर: Uncaught TypeError: Cannot set property 'innerHTML' of null । 3) editRow में, मैं फ़ील्ड संपादन योग्य बनने के लिए, लेकिन डिफ़ॉल्ट मानों से पहले जो सहेजा गया था। उदाहरण के लिए, सूची हमेशा ए, बी, सी होती है, जो कि मुझे नहीं चाहिए। मुझे सूची का प्रारंभिक मान होना चाहिए जो पहले चुना गया था। कुछ गलत होना चाहिए जो मैं कर रहा हूं यहां कोड है:

HTML:

<html>

<head>
</head>

<body>
  <div id="wrapper">
    <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
      <thead>
        <tr>
          <th>Name</th>
          <th>Level</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody id="table-rows">
        <tr>
          <td><input type="text" id="name-text"></td>
          <td>
            <select name="levels-list" id="levels-list">
    <option value="A" id="option-1">A</option>
    <option value="B" id="option-2">B</option>
    <option value="C" id="option-3">C</option>
    </select>
          </td>
          <td><input type="button" class="add" value="Add Row" id="add-button"></td>
        </tr>
    </tbody>
    </table>
  </div>
<script src="get-text.js"></script>
</body>

</html>

लिपी:

var myArray = [{
  "name": "aaa",
  "level": "A"
}, {
  "name": "bbb",
  "level": "B"
}, {
  "name": "ccc",
  "level": "C"
}];


display();

function display() {
  var length = myArray.length;
  var htmlText = "";

  for (var i = 0; i < length; i++) {
    htmlText +=
      "<tr id='row" + i + "'>\
                <td>" + myArray[i].name + "</td>\
                <td>" + myArray[i].level + "</td>\
                <td>\
                    <input type='button' id='edit_button" + i + "' value='Edit' class='edit' onclick='editRow("+i+")'> \
                    <input type='button' id='save_button" + i + "' value='Save' class='save' onclick='save_row(" + i + ")'> \
                    <input type='button' value='Delete' class='delete' onclick='delete_row(" + i + ")'>\
                </td>\
            </tr>";
  }//end loop
  htmlText+=
  "<tr>\
    <td><input type='text' id='name-text'></td>\
    <td>\
      <select name='levels-list' id='levels-list'>\
        <option value='A' id='option-1'>A</option>\
        <option value='B' id='option-2'>B</option>\
        <option value='C' id='option-3'>C</option>\
        </select>\
    </td>\
    <td><input type='button' class='add' value='Add Row' id='add-button' ></td>\
  </tr>";

  document.getElementById("table-rows").innerHTML = htmlText;
}//end display

var addButton=document.getElementById("add-button");
addButton.addEventListener('click', addRow, false);

function addRow(){
  event.preventDefault();
  var newData= document.getElementById("name-text").value;
  var newLevel = document.getElementById("levels-list").value;

  var table = document.getElementById("data_table");
  var tableLength = (table.rows.length)-1;
//  console.log(tableLength);
  var row = table.insertRow(tableLength).innerHTML=
   "<tr id= 'row"+tableLength+"'>\
        <td id='name-text"+tableLength+"'>"+newData+"</td>\
        <td id='levels-list"+tableLength+"'>"+newLevel+"</td>\
        <td><input type='button' id='edit-button"+tableLength+"' value='Edit' class='edit' onclick='editRow("+tableLength+")'> \
            <input type='button' id='save-button"+tableLength+"' value='Save' class='save' onclick='saveRow("+tableLength+")'> \
            <input type='button' id= 'delete-button"+tableLength+"' value='Delete' class='delete' onclick='deleteRow("+tableLength+")'>\
        </td>\
   </tr>";

  document.getElementById("name-text").value="";
}//end addRow

function editRow(no)
{
  document.getElementById("edit-button"+no).disabled=true;
   //document.getElementById("save-button"+no).style.display="block";

   var name=document.getElementById("name-text"+no);
   var level=document.getElementById("levels-list"+no);

   var nameData=name.innerHTML;
   var levelData=level.innerHTML;

   name.innerHTML="<input type='text' id='name_text"+no+"' value='"+nameData+"'>";
   level.innerHTML='<select id="levels-list'+no+'">\
                      <option value="A" id="option-1">A</option>\
                      <option value="B" id="option-2">B</option>\
                      <option value="C" id="option-3">C</option>\
                      </select>' ;

  document.getElementById("levels-list"+no).value = levelData;
}

function deleteRow(no) {
  myArray.splice(no, 1);
  document.getElementById("row"+no).innerHTML="";
  //display();
} //end deleteRow

function saveRow(no)
{
  myArray[no].name = document.getElementById("name-text"+no).value;
  myArray[no].level = document.getElementById("levels-list"+no).value;

  document.getElementById("row"+no).innerHTML =
  "<tr id= 'row"+no+"'>\
    <td id='name-text"+no+"'>"+myArray[no].name+"</td>\
    <td id='levels-list"+no+"'>"+myArray[no].level+"</td>\
    <td><input type='button' id='edit-button"+no+"' value='Edit' class='edit' onclick='editRow("+no+")'> \
        <input type='button' value='Delete' class='delete' onclick='deleteRow("+no+")'>\
    </td>\
   </tr>";
}//end saveRow





html-table