将Html表行数据添加到JSON数组对象中

时间:2017-05-21 13:11:05

标签: arrays json html-table asp.net-mvc-5

我是MVC的新手。我想将我的HTML表数据添加到JSON数组对象中。我希望传递给Action使用ajax post。

我无法将html行转换为json对象。可以任何人都有相同的解决方案这将是可观的

提前谢谢

1 个答案:

答案 0 :(得分:3)

HTML

     <table id="table">
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>

用于创建JSON数组的JS代码

  var table = document.getElementById('table');
  var jsonArr = [];
  for(var i =0,row;row = table.rows[i];i++){
       var col = row.cells;
       var jsonObj = {
           company : col[0].innerHTML,
           contact : col[1].innerHTML,
           country : col[2].innerHTML
         }

      jsonArr.push(jsonObj);
  }


  console.log(jsonArr);

https://jsfiddle.net/0h957km9/3/