HTMLとJavaScriptの動的テーブルの問題

私は問題に直面しています：1）関数saveRowは行を保存しません。私はこのエラーを受け取ります：Uncaught TypeError: Cannot set property name of undefined at at saveRow at HTMLInputElement.onclick。 2）deleteRowが機能しません。私は同様のエラー：Uncaught TypeError: Cannot set property 'innerHTML' of nullを取得します。 3）editRowでは、Iフィールドは編集可能になりますが、以前に保存されたものと同じデフォルト値が使用されます。たとえば、リストは常にA、B、Cです。これは私が望んでいないものです。リストの初期値を以前に選択した値にしたい。私は何か間違っているはずです。ここでは、コードは次のとおりです。HTMLとJavaScriptの動的テーブルの問題

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

出典

2017-05-26 user7945230

は、私は少しあなたのコードをリファクタリングして、新しいjsfiddleを作成しました。それをリファクタリングして、プロジェクトにjQueryを挿入することができれば、もっと多くのことを簡単に行うことができます。

ので、いくつかの注意事項：

1）は、あなたのUIの変更を最新にモデル化してください。前のサンプルではHTMLを操作していましたが、配列モデルを更新していませんでした

2）繰り返しを避けるために、共通コードを関数内に保持してください。例えば、私は関数内の行を作成するためのロジックを移動し、ちょうどその関数にあなたが（最初に表示し、行を追加クリックしたときのために）新しい行を作成する必要があるたびに呼び出す

3）を呼び出します行内の関数は、現在のHTML要素も渡します。現在のHTML要素がクリックされたことを知るために渡すことができ、その行を簡単に操作できます。

4）2つのtbodiesを使用します。 1つはデータ用、もう1つはアクション用です。それはアクションから別個のデータにするのを容易にし、毎回その行をアクションのために繰り返さないようにします

そして、コードで単独でチェックできるものはほとんどありません。

あなたが編集しているとき、再び編集をクリックして、たとえば避けるために、右の操作でボタンを無効にするだけのロジックを管理する必要がありますが、それを自分で行うには良い運動になります:)

ここではサンプル：

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 = ` 
 
    \t <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 = ` 
 
    \t <div class="level-content">${el.level}</div> 
 
    \t <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) { 
 
    \t createDataRow(el,ind); 
 
    }); 
 
} 
 

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

 
function addRow(){ 
 
    event.preventDefault(); 
 
    var newEl = { 
 
    \t "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) 
 
{ 
 
\t 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) 
 
{ 
 
\t 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（この時間は保存された：D）：

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

私はそれが役に立ちそうです。どのようなクエリについても教えてください。

出典

2017-05-26 23:38:29 quirimmo

ありがとうございます。しかし、あなたが言ったことから何も本当にうまくいかない。投稿した変更は私が投稿したものと変わらず、問題を解決しません。指定したコードリンクは実行されません。 – user7945230

今編集が完了しました。しかし、あなたのコードはリンクではありません。いずれのボタン（保存、編集、削除）も機能を実行していません。 – user7945230

URLを更新するjsfiddleで最後のバージョンを保存しませんでした。- – quirimmo

HTMLとJavaScriptの動的テーブルの問題

答えて

関連する問題