Question

我正在尝试为用户生成的表的每个单元格分配一个密钥，其中包含未知数量的列和行：

，例如，HTML

    <table>
     <tr>
      <td>
       <select class="colheaders">
        <option value="firstname"> first name</option>
        <option value="familyname"> Family name</option>
       </select>
     </td>
    </tr>
    <tr>
     <td>
      <select class="colheaders">
       <option value="firstname"> first name</option>
       <option value="familyname"> Family name</option>
      </select>    
     </td>
   </tr>

   <tr>
    <td>Bob</td>
    <td>Smith</td>
   </tr>

  <tr>
    <td>John</td>
    <td>Jones</td>
   </tr>
</table>

而不是这个

$('#mytable tr').each(function(row, tr) {
    TableData[row] = {
        "col1": $(tr).find('td:eq(1)').text(), 
        "col2": $(tr).find('td:eq(2)').text(), 
        "col3": $(tr).find('td:eq(3)').text()
    }
});

“col1”将是同一行中的选定选项。一旦通过AJAX发布，我就可以返回一个key-＆gt;值数组。

如，

{
 "first name" : "bob",
 "family name" : "smith"
}
{
 "first name" : "John",
 "family name" : "Jones"
}

我目前有：

var TableData = new Array();
var colheaders = new Array();
var namerows = new Array();

$('.colheaders option:selected').each(function() {
    colheaders.push($(this).val());
});

var i;
for (i = 0; i < colheaders.length; i++) { 
    namerows.push('"' + colheaders[i]  + '" : $(tr).find("td:eq(' + i + ')").text()');
}   

$('#mytable tr').each(function(row, tr) {
    TableData[row] = namerows 
});

然而，这会生成脚本而不是单元格。

"[[\"\\\"first name\\\" : $(tr).find(\\\"td:eq(0)\\\").text()\\n\",\"\\\family name"\\\" : $(tr).find(\\\"td:eq(1)\\\").text()\\n\",\"\\\"\\\" : $(tr).find(\\\"td:eq(2)\\\").text()\\n\"],

等。

Answer 1

为什么你需要不必要地复杂化。eval永远不是推荐的选择。试试这个link来阅读更多相关内容。

逻辑很简单。 .colheaders中所选选项的计数（我们称之为 n ）是我们拥有的列数。所以你可以做的是，在each函数中，创建一个计数直到 n 的循环并获取每个td的列数据。然后在循环结束时，您将拥有保存表行列数据的对象。

尝试这样的事情。

var TableData = new Array();
var temp = {};
var selected = $('option:selected').map(function(){
    return this.value;
}).get();
var i;
var tableRows = $('#mytable tr');
tableRows.each(function(row, tr) {
    for (i = 0; i < selected.length; i++) {
        temp = {};
        temp['col' + (i + 1)] = tableRows.children('td').eq( selected[i] ).text();
    }
    TableData[row] = temp;
});

Answer 2

您可以使用以下方式映射表格行并获取相关的TD文本：

var TableData = $('table tr').map(function(i, tr) {
    var row = {};
    $(tr).children('td').each(function(z, td) {
        return row['col' + z] = td.innerHTML;
    });
    return row;
}).get();

看看它是否符合您的预期行为：

-jsFiddle-

Answer 3

我不知道这是否能回答你的问题，但如果你有一个包含函数的字符串，即

var hi = "function hi() {alert('hi');}"

使用

eval(hi);

这将“加载”该功能，然后您可以使用

调用它

hi();

我会完成整个功能：

$('#mytable tr').each(function(row, tr) {
TableData[row] = {
    "col1": $(tr).find('td:eq(1)').text(), 
    "col2": $(tr).find('td:eq(2)').text(), 
    "col3": $(tr).find('td:eq(3)').text()
}
});

^单个字符串然后使用它。因此，当您为namerows生成逻辑时，将其包含在包含外部函数的更大字符串中。

即。

var myFunc = "$('#mytable tr').each(function(row, tr) { TableData[row] = " + namerows + "});"

eval(myFunc);
myFunc();

使用数组

3 个答案:

-jsFiddle-