循环遍历获取table中的td,tr

​
贴上页面div

<div align="center">
   <table id="tab" border="1" align="center">

      <tr>
         <td>电鳗</td>
         <td>贝壳鱼</td>
      </tr>

      <tr>
         <td>炸弹</td>
         <td>烟雾弹</td>
      </tr>

      <tr>
         <td>双倍卡</td>
         <td>减速标</td>
         <td>放大镜</td>
      </tr>

   </table>

<br>

   <button id="btntb">遍历table</button>

</div>

js代码通过行列获取

var tb = document.getElementById('tab');    // table 的 id
var rows = tb.rows;                           // 获取表格所有行
for(var i = 0; i<rows.length; i++ ){
   for(var j = 0; j<rows[i].cells.length; j++ ){    // 遍历该行的 td
       alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+rows[i].cells[j].innerHTML+"。");           // 输出每个td的内容
   }
}

js通过table标签获取

$('#btntb').click(function(){
   $('#tab tr').each(function(i){                   // 遍历 tr
      $(this).children('td').each(function(j){  // 遍历 tr 的各个 td
         alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");
      });
   });
});

参考table的tr是有input标签组成的页面

<table class="layui-table" id="table" lay-filter="table">
        <thead>
        <tr>
            <td>Key</td>
            <td>Value</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr id="clo" name="clo">
            <td><input type="text" class="layui-input" id="key" name="key"></td>
            <td>
                <input type="text" class="layui-input" id="value" name="value"></td>
            </td>
            <td>
                <button id="add" onclick="add()" class="layui-btn layui-btn-normal layui-btn-sm">增加</button>
                <button id="del" onclick="del()" class="layui-btn layui-btn-normal layui-btn-sm">删除</button>
            </td>
        </tr>
        </tbody>
    </table>
<div> <textarea id="result" placeholder="转换后的JSON内容" class="layui-textarea"></textarea></div>

js方法

function changeContentJson() {
       var $ = layui.jquery,
           layer = layui.layer;
       let map = new Object();
       $('#table tr').each(function (i) {
           let inputKey = $(this).find('td:eq(0) input').val();//取表格的第i行第i列的input标签的值
           let inputValue = $(this).find('td:eq(1) input').val();//取表格的第i行第i+1列的input标签的值
           if (inputKey != null && inputValue != null) {
               let key = inputKey;
               map[key] = inputValue;
           }
       });
       let b = JSON.stringify(map);
       $('textarea').val(b);
   }

​