如何讀取動態生成的HTML表格行的td值？

在我的應用程序中，我需要輸入輸入控件（TextBoxes）中的所有輸入值。如何讀取動態生成的HTML表格行的td值？

然後，將這些值作爲一行插入表中，在這裏我檢查冗餘的EmpNo值。刪除按鈕將在插入表格的行時與ID一起動態生成。

現在我需要刪除的行刪除時，單擊按鈕

如何選擇選擇刪除按鈕的行？並從表中刪除它？

enter image description here

$("#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 !"); 
        } 
       } 
      } 
     })

來源

2014-09-10 Sanjeev4evr

我把代碼中的jsfiddle，請查看這裏http://jsfiddle.net/x34fseh3/1/ – Sanjeev4evr 2014-09-10 18:30:30

任何機會呢？ – Turnip 2014-09-10 18:37:18

@ 3rror404但它在我的本地機器即Visual Studio IDE中運行良好。我在jsfiddle中放置了相同的代碼。但它不在jsfiddle中工作。 – Sanjeev4evr 2014-09-10 18:40:44

這是您的更新FIDDLE。

這裏是重要的一行：

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

我只是用你的點擊事件觸發一個.remove（）。

來源

2014-09-10 19:30:51 TimSPQR

生成一致的方式行和按鈕的ID（如DelButton1，ROW1; DelButton2，行2，等等）。然後在刪除按鈕事件處理程序中，獲取調用者的ID，用它來確定伴隨行的ID，然後刪除該行。

另外，請注意，要刪除元素，您需要在該元素的父元素上使用removeChild（）。

或者，如果您有刪除按鈕對象，你可以使用：

<deleteButton>.parentNode.parentNode

得到tr元素（第一parentNode獲得TD元素的按鈕是，第二個是TR）。請注意，如果在tr之前在按鈕周圍有任何其他標籤，這意味着您需要多次調用parentNode。

來源

2014-09-10 18:40:10 HamHamJ

是的，我可以將該行添加到表中，在這裏我需要獲取點擊刪除按鈕的行，然後從表中刪除該行。 – Sanjeev4evr 2014-09-10 18:46:54

這就是我在說的嗎？刪除該行相當於刪除元素。 – HamHamJ 2014-09-10 18:49:49

簡單的解決方案是在輸入讀取和附加的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){...}

此代碼添加到表中。所以在輸入「點擊」時，你必須正確讀入值。

來源

2014-09-10 18:40:31 Jay

是的，我做到了，我需要刪除選定的行，當我點擊刪除按鈕 – Sanjeev4evr 2014-09-10 18:48:05

添加了一些代碼，大綱，如果你願意。 – Jay 2014-09-10 18:59:33

請嘗試_working_的jsfiddle這個

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

它的工作

來源

2015-09-28 06:27:56

如何讀取動態生成的HTML表格行的td值？

回答

相關問題