javascript - Javascript を使用して行を動的に編集する

Question

このコードには 2 つのコンテナーがあり、1 つは右側に、もう 1 つは左側にあります。左のものには、ユーザーが詳細を入力して「保存」ボタンを押す構造のようなフォームが含まれており、詳細は「Excel のような」形式の右のコンテナに保存されます...

右側のコンテナには、多くの行と限られた数の列を含めることができます...そして、すべての行には、更新または削除するためのそれぞれの「編集/削除」ボタンがあります..

問題は、「行」の詳細を左側のコンテナーフォームに送信して再度編集し、右側のコンテナーに送り返したいということです。

ここのボタンどうしよう？？それとも他の方法がありますか？過去8時間のこのコードのために、私は机に頭をぶつけています..

どんな助けでも大歓迎です。

var cell9 = row.insertCell(7);
        var element2 = document.createElement("input");
        element2.type = "button";
        element2.value = "Edit";
        element2.onclick = ?

誰か助けてください...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ass6</title>

<script type="text/javascript">

function addRow(tableID) {

    if("" == document.getElementById("crw").value) {     
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        alert(rowCount);
        var cell1 = row.insertCell(0);

        var element1 = document.createElement("input");
        element1.type = "checkbox";
        cell1.appendChild(element1);

        var cell3 = row.insertCell(1);
        cell3.innerHTML = document.ass6.e1.value; 

        var cell4 = row.insertCell(2);
        cell4.innerHTML = document.ass6.en1.value;

        var cell5 = row.insertCell(3);
        cell5.innerHTML = document.ass6.ed1.value;

        var cell6 = row.insertCell(4);
        cell6.innerHTML = document.ass6.et1.value;

        var cell7 = row.insertCell(5);
        cell7.innerHTML = document.ass6.ep1.value;

        if(document.getElementById("eg1").checked) {
                var cell8 = row.insertCell(6);
                cell8.innerHTML = document.ass6.eg1.value;
            }
            if(document.getElementById("eg2").checked) {
                var cell8 = row.insertCell(6);
                cell8.innerHTML = document.ass6.eg2.value;
            }
            document.getElementsByTagName("INPUT")[0].setAttribute("onclick",""); 
        var cell9 = row.insertCell(7);
        var element2 = document.createElement("input");
        element2.type = "button";
        element2.value = "Edit";
        element2.onclick = 


        }
        cell9.appendChild(element2);


        var element3 = document.createElement("input");
        element3.type = "button";
        element3.value = "Delete";
        cell9.appendChild(element3);


    //Clearing the form
    document.ass6.e1.value = "";
    document.ass6.en1.value = "";
    document.ass6.ed1.value = "";
    document.ass6.et1.value = "";
    document.ass6.ep1.value = "";
}
    //To update
    if(document.getElementById("crw").value) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        var i = document.getElementById("crw").value;
        alert(i);

                  table.rows[i].cells["1"].innerHTML = document.getElementById("e1").value;
                  table.rows[i].cells["2"].innerHTML = document.getElementById("en1").value;
                  table.rows[i].cells["3"].innerHTML = document.getElementById("ed1").value;
                  table.rows[i].cells["4"].innerHTML = document.getElementById("et1").value;
                  table.rows[i].cells["5"].innerHTML = document.getElementById("ep1").value;

                 document.getElementById("crw").value = i;

                //Clearing the form
                    document.ass6.e1.value = "";
                    document.ass6.en1.value = "";
                    document.ass6.ed1.value = "";
                    document.ass6.et1.value = "";
                    document.ass6.ep1.value = "";
}    
}

//Editing the row
function edt(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=1; i<rowCount; i++) {
             var row = table.rows[i];
             var chkbox = row.cells[0].childNodes[0];
             if(null != chkbox && true == chkbox.checked) {
                 document.getElementById("e1").value = table.rows[i].cells["1"].innerHTML;
                 document.getElementById("en1").value = table.rows[i].cells["2"].innerHTML;
                 document.getElementById("ed1").value = table.rows[i].cells["3"].innerHTML;
                 document.getElementById("et1").value = table.rows[i].cells["4"].innerHTML;
                 document.getElementById("ep1").value = table.rows[i].cells["5"].innerHTML;

                 document.getElementById("crw").value = i;

             }
        }
        }catch(e) {
            alert(e);
        }
}

//Deleting the row
function deleteRow(tableID) {
    try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for(var i=0; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            table.deleteRow(i);
            rowCount--;
            i--;
        }
}
    }catch(e) {
        alert(e);
    }
}

</script>
</head>
<body>
    <div style="margin-top: 200px; margin-left: 150px; width: 300px; background-color: lightblue;">
        <form name="ass6">
            <table>
                <tr>
                    <td>EmployeeId</td> <td><input type="text" id="e1"></td>
                </tr>
                <tr>
                    <td>Employee Name</td> <td><input type="text" id="en1"></td>
                </tr>
                <tr>
                    <td>Designation</td> <td><input type="text" id="ed1"></td>
                </tr>
                <tr>
                    <td>Team</td> <td><input type="text" id="et1"></td>
                </tr>
                <tr>
                    <td>Phone no.</td> <td><input type="text" id="ep1"></td>
                </tr>
                <tr>
                    <td>Gender</td> <td>Male <input type="radio" id="eg1" value="Male" name="gen"> Female<input type="radio" id="eg2" value="Female" name="gen"></td>
                </tr>
                <tr>
                    <td></td> <td></td>
                </tr>
                <tr>
                    <td></td> <td></td>
                </tr>
            </table>
        </form>
        <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
    </div>


 <div style="margin-top: -200px; margin-left: 500px; width: 480px; background-color: lightgreen;"> 
 <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <td></td>
            <td>ID</td>
            <td>Name</td>
            <td>Designation</td>
            <td>Team</td>
            <td>Phone no.</td>
            <td>Gender</td>
            <td>Action</td>
        </TR>
    </TABLE>



    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
  <INPUT type="button" value="Edit" onclick="edt('dataTable')" />
  <input type="hidden" id="crw">
 </div>   
</body>
</html>

score -1 · Accepted Answer

これはまさにあなたが望むものです。各行には編集および削除機能があります http://www.amitpatil.me/add-edit-delete-rows-dynamically-using-jquery-php/

javascript - Javascript を使用して行を動的に編集する

1 に答える 1

Related

Reference