JS / JQuery Редактировать / обновить таблицу - PullRequest
Новая
       8

JS / JQuery Редактировать / обновить таблицу

0 голосов
/ 15 января 2019

Я новичок и пытаюсь закодировать таблицу, в которой вы можете динамически создавать, редактировать и удалять таблицы. Пока что я могу создавать скриншоты и удалять их. Я борюсь со своим кодом, так как редактирование не будет работать: 

$("btn3").click(function(){ 
    $("table tbody").find("input [name=record]").each(function(){
        if($(this).is(":checked")){
            var myRow = readInput();
            $(this).closest("tr").replaceWith("<tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +  
           myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
        }
    });
});

Мой стол выглядит так:

enter image description here

Кнопка «btn3» активна, но ничего не происходит. Было бы здорово, если бы кто-то мог мне помочь.

РЕДАКТИРОВАТЬ: HTML часть: 

</head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 60%;
}

td, th {
  border: 1px solid #dddddd;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<body>

<h2>Employee data</h2>
First Name:<input type="text" name="fname" id="fnameid" /><br/><br/>
Last Name:<input type="text" name="lname" id="lnameid" /><br/><br/>
Position:<input type="text" name="position" id="positionid" /><br/><br/>
Status:<input type="text" name="stat" id="statid" /><br/><br/>
<button id="btn1">New Employee</button>
<button id="btn2">Delete</button>
<button id="btn3">Update</button>

<table id = "employeeTable" class="display" style="width:60%">
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Position</th>
    <th>Status</th>
  </tr>
  </thead>
  <tbody></tbody>
</table>

UPDATE2: Редактирование теперь работает, однако я не могу удалить строки, которые были отредактированы ранее ...
Код выглядит следующим образом: 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

    function Row(id, name, surname, position, stat){
        this.id = id;
        this.name = name;
        this.surname = surname;
        this.position = position;
        this.stat = stat;
    }


    function readInput(){
        var fname = $("#fnameid").val();
        var lname = $("#lnameid").val();
        var position = $("#positionid").val();
        var stat = $("#statid").val();
        var nRow = new Row(new Date($.now()), fname, lname, position, stat);
        return nRow;
    }

    //new Employee 
    $("#btn1").click(function(){
        var myRow = readInput();
        $("table tbody").append("<tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +  
        myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
    });

    //delete
    $("#btn2").click(function(){
        $("table tbody").find("input[name='record']").each(function(){
            if($(this).is(":checked")){
                $(this).parents("tr").remove();
            }
        });
    });



    //update
    $("#btn3").click(function(){    
    var myRow = readInput();
        $("table tbody").find("input[name='record']").each(function(){
            if($(this).is(":checked")){
                var curRow = $(this).parent().parent()
                curRow.replaceWith("tr><td><input type='checkbox' name='record'/></td><td>" + myRow.id + "</td><td>" +  
               myRow.name + "</td><td>" + myRow.surname + "</td><td>" + myRow.position + "</td><td>" + myRow.stat + "</td></tr>");
            }
        });
    });
});

</script>
</head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 60%;
}

td, th {
  border: 1px solid #dddddd;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
<body>

<h2>Employee data</h2>
First Name:<input type="text" name="fname" id="fnameid" /><br/><br/>
Last Name:<input type="text" name="lname" id="lnameid" /><br/><br/>
Position:<input type="text" name="position" id="positionid" /><br/><br/>
Status:<input type="text" name="stat" id="statid" /><br/><br/>
<button id="btn1">New Employee</button>
<button id="btn2">Delete</button>
<button id="btn3">Update</button>

<table id = "employeeTable" class="display" style="width:60%">
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Position</th>
    <th>Status</th>
  </tr>
  </thead>
  <tbody>
  <tr>
</tr>
  </tbody>
</table>

<form id="newEmploy" 

<script>


</script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 15 января 2019

$("btn3") должно быть $("#btn3"), когда вы ссылаетесь на идентификатор. Кроме того, вот простой пример того, как я бы это сделал: 

$("#btn3").click(function(){ 
    $("table tbody").find(".status:checked").each(function(){
           var row = $(this).parent().parent() // here is the row
    
            row.replaceWith("<tr><td><input type='checkbox' name='record'/></td><td>5</td><td>asda</td><td>dfgdfg</td><td>sfsdf</td><td>sfasd</td></tr>");
        
    });
});
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 60%;
}

td, th {
  border: 1px solid #dddddd;
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Employee data</h2>
<button id="btn3">Update</button>

<table id = "employeeTable" class="display" style="width:60%">
  <thead>
  <tr>
    <th></th>
    <th>ID</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Position</th>
    <th>Status</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>
  <input type="checkbox" class="status" /> </td>
  
   <td>1</td>
     <td>sue</td>
       <td>la</td>
         <td>HR</td>
           <td>Active</td>
  </tr>
  
  </tbody>
</table>
0 голосов
/ 15 января 2019

Мы не можем точно знать, что вам нужно сделать, даже не увидев ваш HTML. Но следующее, безусловно, неправильно: 

$("table tbody").find("input [name=record]")

Этот селектор находит любой элемент с name из record, который является потомком input элемента. Что, очевидно, не имеет смысла (у input нет детей), я предполагаю, что вы имеете в виду: 

$("table tbody").find("input[name='record']")

Находит все элементы input с атрибутом name record. Да, это пространство или его отсутствие имеет большое значение! (И я также добавил кавычки вокруг значения, которое, я думаю, также требуется.)

PS Остальной код я не проверил подробно, поэтому, возможно, есть и другие ошибки. Как я уже сказал, нам нужен ваш HTML, чтобы проверить это.

РЕДАКТИРОВАТЬ: Я только что заметил еще одну ошибку. У вас есть $("btn3").click(...) - это должно быть $("#btn3").click(...). Спасибо за добавление HTML.

...