javascript - 基于表格单元格按钮动态访问td

Question

我知道这个问题可能是相同的。我用谷歌搜索过，不幸的是我可能错过了类似的东西。我对此表示歉意。

我已经根据一些 JSON 响应在 JavaScript 中创建了一个动态表，并相应地更新了该表。现在 J 有一个提交按钮，它将当前选定的原始数据作为 ajax 调用发布。在表格中，每一行的一个单元格中有一个隐藏元素，每行有一个“应用”按钮。

所以，我想在按下按钮时获取隐藏元素数据。

以下是代码:

**JS **

var cell0;var cell1;var cell2;var cell3;var cell4;var cell5;
var cell6;var cell7;var cell8;
var cell9;
var jobID;$(document).ready(function(){
$('#ajax-button').click(function() {
    var formData=$("#careers").serialize();
    console.log("This is the skills : "+formData);
        $.ajax({
            type : "POST",
            url : "currentopening",
            //data : "skills="+skills,
            data:formData,
            dataType : "json",
            async: true,
            success : function(response) {
                var obj = JSON.parse(response);

                console.log("length of json response : "+obj.length)
                if(obj.length>0){
                //for (var i = 0; i < obj.length; i++) 
                //{
                    console.log("the characteristics : "+obj[0].title);
                    addRow(obj);
                //}
                }
                else{
                    document.getElementById("dynamictable").innerHTML="No jobs found!";
                }
            }
        });
    });    
});function addRow(obj) {

var table_1 = document.getElementById("dynamictable");

for(var i=0;i<obj.length;i++){

var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
btn.id="apply-button";

var input = document.createElement("input");
input.setAttribute("id",obj[i].jobID);
input.setAttribute("type", "hidden");
input.setAttribute("name", "jobID");
input.setAttribute("value", obj[i].jobID);

var rowCount = table_1.getElementsByTagName("tr").length;

var row1 = table_1.insertRow(rowCount);
row1.id="x";

 cell0=row1.insertCell(0);
 cell1=row1.insertCell(1);
 cell2=row1.insertCell(2);
 cell3=row1.insertCell(3);
 cell4=row1.insertCell(4);
 cell5=row1.insertCell(5);
 cell6=row1.insertCell(6);
 cell7=row1.insertCell(7);
 cell8=row1.insertCell(8);
 cell9=row1.insertCell(9);

cell0.headers="title"; cell1.headers="qualification"; cell2.headers="salary"; cell3.headers="companyName"; cell4.headers="tags"; cell5.headers="location"; 
cell6.headers="experience"; cell7.headers="aboutCompany";cell8.id="hidden-element";
cell9.id="doit";

cell0.innerHTML= obj[i].title;
cell1.innerHTML= obj[i].qualification;
cell2.innerHTML= obj[i].salary;
cell3.innerHTML= obj[i].companyName;
cell4.innerHTML= obj[i].tags;
cell5.innerHTML= obj[i].location;
cell6.innerHTML= obj[i].experience;
cell7.innerHTML= obj[i].aboutCompany;
document.getElementById("doit").appendChild(btn);
document.getElementById("hidden-element").appendChild(input);

}};$(document).on('click','#apply-button',function(event){
console.log("id of current element : ");
    var formData=document.getElementById("dynamictable"); /*This is where i need to fetch the data*/
    console.log("id of current element : "+formData);
    //console.log("This is the filter : "+formData);
    event.preventDefault();
        $.ajax({
            type : "GET",
            url : "apply",
            //data : "skills="+skills,
            data:"jobID="+formData,
            dataType : "text",
            async: true,
            success : function(response) {

                console.log("The response : "+response);
            }
        });
    });

当我点击apply-button id时，我需要访问input变量的id。

Answer 1

我遇到了同样的情况，我最终使用的是 dataTables。

http://www.datatables.net/

它非常易于使用，并且有大量文档。

如果您使用它，您可以将表中的数据转换为 json 对象并操作数据。

我会将此添加为评论，但我没有足够的声誉来这样做。

希望这有帮助。