Как читать динамически генерируемое значение td таблицы таблицы таблицы?

Question

В моем приложении мне нужно ввести все входные значения в элементах управления вводом (TextBoxes).

Затем вставьте эти значения в таблицу в виде строки. Здесь я проверял избыточные значения EmpNo. Кнопка удаления будет генерироваться динамически вместе с идентификатором, вставляя строку таблицы.

Теперь мне нужно удалить строку, если кнопка удаления нажата

Как выбрать строку выбранной кнопки удаления? и удалить его из таблицы?

Demo on JSFiddle

$("#btnInsert").click(function() { 
      var eNo = $("#txtEmpNo").val(); 
      var eName = $("#txtEmpName").val(); 
      var sal = $("#txtSalary").val(); 
      var deptNo = $("#txtDeptNo").val(); 
      var rowCnt = $("#tblBody tr").size(); 

      if (eNo == "" && eName == "" && sal == "" && deptNo == "") { 
       alert("Enter values"); 
      } 
      else { 
       if (rowCnt == 0) { 
        $("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo +" <input type='button' value='Delete' id='btnDelete"+rowCnt+"'/></td></tr>").appendTo("#tblBody"); 
        $("input[id^=txt]").val(""); 
        $("input[id^=btnDelete]").bind("click", function() { 
         alert("delete button is clicked"); 
        }); 

       } 
       else { 
        var dupCount = 0; 
        for (var i = 0; i < rowCnt; i++) { 
         var num = $("#Items" + i).html().toString(); 
         if (eNo == num) { 
          dupCount++; 
         } 
        } 
        if (dupCount == 0) { 
         $("<tr><td id='Items" + rowCnt + "'>" + eNo + "</td><td>" + eName + "</td><td>" + sal + "</td><td>" + deptNo + " <input type='button' value='Delete' id='btnDelete" + rowCnt + "'/></td></tr>").appendTo("#tblBody"); 
         $("input[id^=txt]").val(""); 
         $("input[id^=btnDelete]").bind("click", function() { 
          alert("delete button is clicked"); 
         }); 
        } 
        else { 
         alert("Your entered EmpNo is already exists in the table !"); 
        } 
       } 
      } 
     }) 

Answer 1

Ваш последний номер FIDDLE.

Вот важная строка:

JS

$(this).parent().parent().remove(); 

Я просто использовал ваше мероприятие Нажмите, чтобы вызвать .remove().

Answer 2

Сформировать строку и идентификатор кнопки в последовательным образом (например, DelButton1, Row1; DelButton2, row2, и т.д.). Затем в обработчике событий кнопок удаления, получите идентификатор вызывающего, используйте это, чтобы определить идентификатор сопутствующей строки, и удалите эту строку.

Также обратите внимание, что для удаления элемента вам необходимо использовать removeChild() для родителя этого элемента.

В качестве альтернативы, если у вас есть удаления объект кнопки, вы можете использовать:

<deleteButton>.parentNode.parentNode 

, чтобы получить элемент Tr (первый ParentNode получает Td элемент кнопки находится, вторая В). Обратите внимание, что если у вас есть другие теги вокруг кнопки перед tr, это означает, что вам нужно вызывать parentNode больше раз.

Answer 3

Простое решение читает на входе и добавления HTML-таблице:

var rowid = 0; 
function addRow(empno, name, sal, deptno){ 
    rowid = "tableRow" + tableid; 
    var row = "<tr id=rowid><td>"+ empno+"</td>"+ "<td>"+ name+"</td>"+ "<td>"+ 
          sal+"</td>"+ "<td>"+deptno+"</td></tr>"; 
      $("tbody").append(row); 
      id+=1; 
    } 
function removeRow(rowid){...} 

Этот код добавляет к таблице. Поэтому при вводе «нажмите» вы должны правильно прочитать значения.

Answer 4

пожалуйста, попробуйте этот

//=======remove dyanamic file=====// 
    $(document).on("click", "#btnDelete", function() { 
     $(this).closest("#YourtrID").remove(); 
    }); 

он работает