Question

我做了一张桌子。在那，我想动态地进行添加，删除和更新操作。在我的代码中，我正在动态向表中添加和删除行，现在我想通过jQuery编辑表行。更新功能的代码是什么？

在这里，我添加了我的JavaScript代码。

function Add() {
        AddRow($("#txtName").val(), $("#txtEmail").val(), $("#txtCity").val());
        $("#txtName").val("");
        $("#txtEmail").val("");
        $("#txtCity").val("");
    };

    function AddRow(name, email, city) {

        var tBody = $("#tblCustomers > TBODY")[0]; 

        row = tBody.insertRow(-1); 
        console.log(row);

        var cell = $(row.insertCell(-1));
        cell.html(name); 

        cell = $(row.insertCell(-1));
        cell.html(email);

        cell = $(row.insertCell(-1));
        cell.html(city);

        cell = $(row.insertCell(-1));
        var btnRemove = $("<input />");
        btnRemove.attr("type", "button");
        btnRemove.attr("onclick", "Remove(this);");
        btnRemove.val("Remove");            
        var btnEdit = $("<input />");
        btnEdit.attr("type", "button");
        btnEdit.attr("onclick", "Edit(this);");
        btnEdit.val("Edit");
        cell.append(btnRemove," ",btnEdit);
    };

    function Remove(button) {

        var row = $(button).closest("TR");            
        var name = $("TD", row).eq(0).html();
        console.log(row,name,row[0].rowIndex);
        if (confirm("Do you want to delete: " + name)) {

            var table = $("#tblCustomers")[0];

            table.deleteRow(row[0].rowIndex);
        }
    };

    function Edit(button) {

         var row = $(button).closest("TR");
         console.log(row);         
         var name = $("TD", row).eq(0).html();
         var email = $("TD", row).eq(1).html();
         var city = $("TD", row).eq(2).html();

         if (confirm("Do you want to update: " + name)) {

            var table = $("#tblCustomers")[0];
            console.log(row,name,row[0].rowIndex);
            $("#txtName").val(name);
            $("#txtEmail").val(email);
            $("#txtCity").val(city);

            $('#button1').html("<input type='button' value='Update' onclick=update(this);> <input type='button' value='Cancel' onclick=Cancel();>");      
            return false;
        }
    };
    function update(button)
    {   
        // updation code here..


    };

    function Cancel()
    {               
        $('#button1').html("<input type='button' value='Add' onclick=Add();>");
        $("#txtName").val("");
        $("#txtEmail").val("");
        $("#txtCity").val("");
        return false;
    }

HTML代码：

 <form>
    Name: <input type="text" id="txtName" placeholder=" Name"><br><br>
    Email: <input type="text" id="txtEmail" placeholder=" Email"><br><br>
    City: <input type="text" id="txtCity" placeholder=" City"><br><br>        
   <div id="button1"> <input type="button" id="add" onclick="Add()" value="Add Row"> </div>
</form>
<table id="tblCustomers">
    <thead>
        <tr>                
            <th>Name</th>
            <th>Email</th>   
            <th>City</th>
            <th>Action</th>             
        </tr>
    </thead>
    <tbody>            
    </tbody>
</table>

CSS：

 table{
        width: 60%;
        margin: 20px 0;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 5px;
        text-align: left;
    }

Answer 1

您可以这样做：

inspect module base_geo: <module 'deformator.builderator.data_types.geo' from 'Q:\tools\Maya\grinder\scripts\deformator\builderator\data_types\geo.py'>
inspect module Geo: <module 'deformator.builderator.data_types.geo' from 'Q:\tools\Maya\grinder\scripts\deformator\builderator\data_types\geo.py'>
type base_geo: <class 'deformator.builderator.data_types.geo.Geo'>
base_geo: <deformator.builderator.data_types.geo.Geo object at 0x0000016DFD0E77B8>
base_geo.__class__: <class 'deformator.builderator.data_types.geo.Geo'>
Geo: <class 'deformator.builderator.data_types.geo.Geo'>
type(base_geo) == Geo: False
isinstance(base_geo, Geo): False
base_geo.__class__ == Geo: False

___TEST__GEO___
inspect module test_geo: <module 'deformator.builderator.data_types.geo' from 'Q:\tools\Maya\grinder\scripts\deformator\builderator\data_types\geo.py'>
inspect module Geo: <module 'deformator.builderator.data_types.geo' from 'Q:\tools\Maya\grinder\scripts\deformator\builderator\data_types\geo.py'>
type test_geo: <class 'deformator.builderator.data_types.geo.Geo'>
test_geo: <deformator.builderator.data_types.geo.Geo object at 0x0000016DFD3E7A90>
test_geo.__class__: <class 'deformator.builderator.data_types.geo.Geo'>
Geo: <class 'deformator.builderator.data_types.geo.Geo'>
type(test_geo) == Geo: True
isinstance(test_geo, Geo): True
test_geo.__class__ == Geo: True
# Error: TypeError: file Q:\tools\Maya\grinder\scripts\deformator\builderator\data_types\channels.py line 236: <deformator.builderator.data_types.geo.Geo object at 0x0000016DFD0E77B8> is not of type "Geo" #

查看下面的演示以获取完整代码。

function update(button, trindex) {
  var row = $("table tbody tr:eq(" + trindex + ")");
  row.find("td:eq(0)").html($("#txtName").val())
  row.find("td:eq(1)").html($("#txtEmail").val())
  row.find("td:eq(2)").html($("#txtCity").val())
  $('#button1').html("<input type='button' value='Add' onclick=Add();>");
};

function Add() {
  AddRow($("#txtName").val(), $("#txtEmail").val(), $("#txtCity").val());
  $("#txtName").val("");
  $("#txtEmail").val("");
  $("#txtCity").val("");
};

function AddRow(name, email, city) {

  var tBody = $("#tblCustomers > TBODY")[0];

  row = tBody.insertRow(-1);


  var cell = $(row.insertCell(-1));
  cell.html(name);

  cell = $(row.insertCell(-1));
  cell.html(email);

  cell = $(row.insertCell(-1));
  cell.html(city);

  cell = $(row.insertCell(-1));
  var btnRemove = $("<input />");
  btnRemove.attr("type", "button");
  btnRemove.attr("onclick", "Remove(this);");
  btnRemove.val("Remove");
  var btnEdit = $("<input />");
  btnEdit.attr("type", "button");
  btnEdit.attr("onclick", "Edit(this);");
  btnEdit.val("Edit");
  cell.append(btnRemove, " ", btnEdit);
};

function Remove(button) {

  var row = $(button).closest("TR");
  var name = $("TD", row).eq(0).html();
  console.log(row, name, row[0].rowIndex);
  if (confirm("Do you want to delete: " + name)) {

    var table = $("#tblCustomers")[0];

    table.deleteRow(row[0].rowIndex);
  }
};

function Edit(button) {

  var row = $(button).closest("TR");
  var index = row.index();
  var name = $("TD", row).eq(0).html();
  var email = $("TD", row).eq(1).html();
  var city = $("TD", row).eq(2).html();

  if (confirm("Do you want to update: " + name)) {

    var table = $("#tblCustomers")[0];
    $("#txtName").val(name);
    $("#txtEmail").val(email);
    $("#txtCity").val(city);

    $('#button1').html("<input type='button' value='Update' onclick='update(this," + index + ");'> <input type='button' value='Cancel' onclick=Cancel();>");
    return false;
  }
};

function update(button, trindex) {
  var row = $("table tbody tr:eq(" + trindex + ")");
  row.find("td:eq(0)").html($("#txtName").val())
  row.find("td:eq(1)").html($("#txtEmail").val())
  row.find("td:eq(2)").html($("#txtCity").val())
  $('#button1').html("<input type='button' value='Add' onclick=Add();>");
};

function Cancel() {
  $('#button1').html("<input type='button' value='Add' onclick=Add();>");
  $("#txtName").val("");
  $("#txtEmail").val("");
  $("#txtCity").val("");
  return false;
}

table {
  width: 60%;
  margin: 20px 0;
  border-collapse: collapse;
}

table,
th,
td {
  border: 1px solid #cdcdcd;
}

table th,
table td {
  padding: 5px;
  text-align: left;
}

使用jQuery HTML更新表行

1 个答案: