web table 表格动态添加以及数据解析

lidy@80236

已于 2023-05-26 19:17:40 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签：前端数学建模

于 2023-05-26 18:08:02 首次发布

本文链接：https://blog.youkuaiyun.com/swl_std/article/details/130890996

版权

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在HTML中创建一个带表头的动态表格，并使用JavaScript进行数据填充。通过示例函数展示了如何添加包含span、select、input和button的表格行，并提供了获取表格数据和处理删除行事件的方法。此外，还提及了使用正则表达式验证16进制数的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

table 表格动态添加以及数据解析
工作中需要前端处理一个带表头的动态table，在实现的过程走了些弯路，现在把最终的处理点记录一下：
首先，html 下添加表格相关元素，参考如下：

 <div>
    <table style="width:100%;margin-top:24px;"class="myclass" id="mytable">
        <thead>
            <tr>
                <td width="10%">列名1</td>     //第一列
                <td width="30%">列名2</td>     //第二列
                <td width="30%">列名3</td>     //第三列
                 <td width="30%">列名4</td>     //第四列
            </tr>
        </thead>
        <tbody>
        /*tbody  先留白，动态添加*/
        </tbody>
    </table>
</div>

第二步，在相关的js 文件动态添加需要的表数据，处理函数参考如下：

//这里我们演示td 包含 span、select、input、button的几种情况
 function append_mytable_list(value1,value2,value3)
    {
        var u_info = '<tr>' +
        '<td "><span>' +value1+ '</span></td>' +
        '<td><select type="select" >'
		 u_info= u_info +'<option value='+value2+' selected>' + value2 + '</option></select></td>';
		 //在设置input数数据前对字符串去空格处理
		 var value3_real=value3.replace(/\s*/g,"");
        u_info =u_info +'<td><input value=' +value3_real+ '></input></td>' +
        '<td><button type="button"  class="btn_del delete  my_td_delete" role="button"></button>' +
        '</td></tr>';
        $("#mytable tbody").append(u_info);
    }

获取table的数据项

 $('#mytable tbody tr').each(function ()
        {
            item.td1=$(this).find('td:eq(0) span').text();
            item.td2 =$(this).find('td:eq(1) select').val();
            item.td3=$(this).find('td:eq(2) input').val();
           ........
        })

假设表格每行的最后的那个button项，点击可以删除整行，处理事件参考：

 $("body").on("click", ".biss_item_delete", function () {
 //假如需要获得本行的其它单元的值
    var value= $(this).parent().parent().find('span').text();
    $(this).parents("tr").remove();
  })

还有一些比较实用的技巧：
如判断输入的是不是4个字节的16进制数：

var myreg = /^[0-9a-fA-F]{8}$/;
if(myreg.test(value3)==0)   
{
//不是的话，如何处理。。。
}