javascript - 在 javascript 中使用 tr id 更新 tr innerHTML

Question

<script type="text/javascript">
    Array.prototype.AddRecord = function () {

        document.getElementById('mytable').style.display = "block";
        table
        var table = document.getElementById("mytable");
        var rows = table.rows.length;

        var row = table.insertRow(rows++);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);

        //alert(row.id);
        var name = this[0];
        var age = this[1];

        var param = "editrow(\'" + name + "\'," + age + "," + rows + ")";
        var param1 = "deleterow(" + rows + ")";
        var param2 = "Update(\'" + name + "\'," + age + "," + rows + ")";

        cell1.innerHTML = name;
        cell2.innerHTML = age;
        cell3.innerHTML = "<input type='button' value='Edit' id='edit' onclick=" + param + " >";
        cell4.innerHTML = "<input type='button' value='Delete' id='delete' onclick=" + param1 + ">";
        cell5.innerHTML = "<input type='button' value='Update' id='update' onclick=" + param2 + ">";

    }

    function Update(name, age, row) {
        alert(name);
        alert(age);
        alert(row);
        document.getElementById('create').style.display = "none";
        document.getElementById('update').style.display = "block";

    }
</script>

我想根据 tr id 的行 ID 更新行并更新 tr 单元格数据请帮助我，我是新手...提前谢谢...

Answer 1

这就是 jQuery 的问题，您会沉迷于它。无论如何，这是原始的 javascript 解决方案:

此处的关键是为您的行分配 ID，以便稍后您可以获取它。

http://jsfiddle.net/PnMPk/1/ << 工作示例。

updateMethod = function ( nm, age, rowID ){
    //alert( 'Changing Name of :' + rowID );
    var o = getO( rowID );
    o.children[0].innerText = 'Changed';
    o.style.color = 'red';
};

//getO => 
var getO = function( _id ){
  return document.getElementById( _id );
};

Array.prototype.AddRecord = function () {
 getO('mytable').style.display = "block";
        table
        var table = getO("mytable"),
            rows = table.rows.length,
            row = table.insertRow(rows++),
            cell1 = row.insertCell(0),
            cell2 = row.insertCell(1),
            cell3 = row.insertCell(2),
            cell4 = row.insertCell(3),
            cell5 = row.insertCell(4),
            rowID = 'row_'+ table.rows.length;

        row.setAttribute('id', rowID ); //Assign some ID

        var name = this[0],
            age = this[1],
            param = "editrow(\'" + rowID + "\'," + age + "," + rows + ")",
            param1 = "deleterow(" + rowID + ")",
            param2 = "updateMethod(\'" + name + "\'," + age + ",'" + rowID + "')";

        cell1.innerHTML = name;
        cell2.innerHTML = age;
        cell3.innerHTML = "<input type='button' value='Edit' id='edit' onclick=" + param + " >";
        cell4.innerHTML = "<input type='button' value='Delete' id='delete' onclick=" + param1 + ">";
        cell5.innerHTML = "<input type='button' value='Update' id='update' onClick=" + param2 + ">";


    };

['rakesh',26].AddRecord();
['juyal',28].AddRecord();
['Click',26].AddRecord();
['update',28].AddRecord();
['CHANGE_NAME',28].AddRecord();

如果您需要对它进行一些修改，请告诉我。