javascript - 如何从表的outerHTML 值创建列表对象？

Question

请查看this fiddle .

这有一个外部HTML var 。现在，我必须将其创建为对象列表；对象将位于每一行。
在此示例中，行号为 3 ，但我将在 var 中获取它，例如

var maxrow = $('#rownumber').val();
var TotalObject = [] ;

其中将包含:

{
    {column1header :row1col1value ,column2header :row1col2value ,column3header :row1col3value,column4header :row1col4value },
    {column1header :row2col1value ,column2header :row2col2value ,column3header :row2col3value,column4header :row2col4value },
    {column1header :row2col1value ,column2header :row2col2value ,column3header :row2col3value,column4header :row2col4value }
}

然后，我必须通过 ajax 调用将此对象列表发送到我的 Controller 操作方法:

[httppost]
public PartialViewResult MyAction(list<mymodel> model)
{


   return Partialview ("mypartialview",model);
}

mymodel还有IEnumerable<mymodel>我必须改造的地方this至that .

Answer 1

这种方法怎么样:

1. 使用正则表达式清理输入
2. 将其拆分为数组
3. 创建 iterator为了您的数据
4. 将结果推送到 JSON 对象
5. 使用 Ajax 发送 JSON 结果？

编辑:我改进了清理正则表达式；它现在应该考虑空值。
它基于 HTML 标记，该标记在您的示例中无效(缺少 </tr> 或 <tr> 标签)。

var outerhtml = "\r\n\r\n<thead>\r\n\r\n<tr>\r\n\r\n<th>\r\n\r\ncolumn1header\r\n\r\n\r\n\r\n</th>\r\n\r\n<th>\r\n\r\ncolumn2header\r\n\r\n</th>\r\n\r\n<th>\r\n\r\ncolumn3header\r\n\r\n</th>\r\n\r\n<th>\r\n\r\ncolumn4header\r\n\r\n</th>\r\n\r\n</tr>\r\n\r\n</thead>\r\n\r\n<tbody>\r\n\r\n<tr>\r\n\r\n<td>\r\n\r\nrow1col1value\r\n\r\n</td>\r\n\r\n<td>\r\n\r\nrow1col2value\r\n\r\n</td>\r\n\r\n<td>\r\n\r\nrow1col3value\r\n\r\n</td>\r\n\r\n<td>\r\n\r\nrow1col1value\r\n\r\n</td>\r\n\r\n</tr>\r\n\r\n<tr>\r\n\r\n<td>\r\n\r\nrow2col1value\r\n\r\n</td>\r\n\r\n<td>\r\n\r\nrow2col2value\r\n\r\n</td>\r\n\r\n<td>\r\n\r\nrow2col3value</td>\r\n\r\n<td>\r\n\r\nrow2col4value\r\n\r\n</td>\r\n\r\n</tr>\r\n\r\n<td>\r\n\r\nrow3col1value\r\n\r\n</td>\r\n\r\n<td>\r\n\r\n row3col2value\r\n\r\n </td>\r\n\r\n<td>\r\n\r\nrow3col3value\r\n\r\n</td>\r\n\r\n <td>\r\n\r\n row3col4value \r\n\r\n </td>\r\n\r\n</tbody>\r\n\r\n";

const data = outerhtml.split("\r\n").join("");
const [_,h,v] = /(?:<thead><tr>(.*)<\/tr><\/thead>)(?:<tbody>(.*)<\/tbody>)/igm.exec(data);

const headers = h.split("</th><th>")
                 .map(t => t.replace("<th>","")
                            .replace("</th>",""));

const values = v.match(/(?:<td>\s*(\s*\w*)\s*<\/td>)/igm)
                .map(t => t.replace("<td>","")
                           .replace("</td>","")
                           .trim());

const iterator = function(array){
  const coll = [...array];
  return {
    [Symbol.iterator](){
      let nextIndex = 0;
      return {
        next: function(){
          const _r = {
            [headers[0]] : coll[nextIndex],
            [headers[1]] : coll[nextIndex+1],
            [headers[2]] : coll[nextIndex+2],
            [headers[3]] : coll[nextIndex+3]
          };
          nextIndex += 4;
          return nextIndex <= coll.length ?
            {value: _r, done: false} :
            {done: true};
        }
      }
    }
  }
}
let json=[];
const tuples = iterator(values);
for(tuple of tuples){
  json.push(tuple);
}

console.log(json);