在javascript中使用tr id更新tr innerHTML

Update tr innerHTML using tr id in javascript

本文关键字:tr id innerHTML 更新 javascript      更新时间:2023-09-26
<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 单元格数据,请帮助我,我是新手......提前感谢...

这就是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();

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