Question

我有一个动态表，我用这个函数创建：

function addRow(v1,v2)
{
       if (!document.getElementsByTagName) return;
       tabBody=document.getElementsByTagName("tbody").item(0);
       row=document.createElement("tr");
       cell1 = document.createElement("td");
       cell2 = document.createElement("td");
       cell3 = document.createElement("td");
       textnode1=document.createTextNode(v1);
       textnode2=document.createTextNode(v2);
       select = document.createElement('select');
       option1 = document.createElement("option");
       option1.setAttribute('value', "op1");
       option1.appendChild(document.createTextNode("op1"));
       select.appendChild(option1);
       option2 = document.createElement("option");
       option2.setAttribute('value', "op2");
       option2.appendChild(document.createTextNode("op2"));
       select.appendChild(option2);
       option3 = document.createElement("option");
       option3.setAttribute('value', "combine");
       option3.appendChild(document.createTextNode("Combine"));
       select.appendChild(option3);
       cell1.appendChild(textnode1);
       cell2.appendChild(textnode2);
       cell3.appendChild(select)
       row.appendChild(cell1);
       row.appendChild(cell2);
       row.appendChild(cell3);
       tabBody.appendChild(row);
}

我正在提取表值：

var values = $('#difftable td') 
     .map(function(i, e){    
     return e.innerText; 
     })
     .get();

我从前两列获取值，但不是第三列中的select标记值。如何从select标签中找到这些值？

Answer 1

在玩了一些之后，这里的代码似乎有效：

首先，为每个td元素添加id并选择：

function addRow(v1,v2, idx)
{
       if (!document.getElementsByTagName) return;
       tabBody=document.getElementsByTagName("tbody").item(0);
       row=document.createElement("tr");
       cell1 = document.createElement("td");
       cell1.setAttribute('id', "tdv1" + idx);
       cell2 = document.createElement("td");
       cell2.setAttribute('id', "tdv2" + idx);
       cell3 = document.createElement("td");
       textnode1=document.createTextNode(v1);
       textnode2=document.createTextNode(v2);
       select = document.createElement('select');
       select.setAttribute('id', "selid" + idx);
       option1 = document.createElement("option");
       option1.setAttribute('value', "v1");
       option1.appendChild(document.createTextNode("v1"));
       select.appendChild(option1);
       option2 = document.createElement("option");
       option2.setAttribute('value', "v2");
       option2.appendChild(document.createTextNode("v2"));
       select.appendChild(option2);
       option3 = document.createElement("option");
       option3.setAttribute('value', "combine");
       option3.appendChild(document.createTextNode("Combine"));
       select.appendChild(option3);
       cell1.appendChild(textnode1);
       cell2.appendChild(textnode2);
       cell3.appendChild(select)
       row.appendChild(cell1);
       row.appendChild(cell2);
       row.appendChild(cell3);
       tabBody.appendChild(row);
}

然后，在脚本中：

var len = $('#difftable').length;
values = new Array(len);
for (i = 0; i < len; i++) {
     values[i] = new Array(3);
     values[i][0] = document.getElementById("tdv1"+i).innerHTML;
     values[i][1] = document.getElementById("tdv2"+i).innerHTML;
                values[i][2] = document.getElementById("selid"+i).value;
}

$.ajax({
type: 'POST',
url: 'MergeServlet',
data: {values:values},
success: function(data){
...
}

仍然希望看到一个更优雅的解决方案。

带有<select>选项列的HTML动态表 - 如何提取</select>值

1 个答案: