javascript填充表格的方法非常简单。在html文件中，通过id获取表格元素，然后使用javascript的DOM操作，遍历数据并动态生成每一行的HTML代码，最后用innerHTML或appendChild方法将生成的HTML代码填充到表格中即可。
例如，有一个存储员工信息的数组：
javascriptvar employees = [{ id: 1, name: "张三", age: 25, salary: 5000 },{ id: 2, name: "李四", age: 30, salary: 6000 },{ id: 3, name: "王五", age: 35, salary: 7000 }];现在需要将这些员工信息展示在表格中。那么，新建一个html文件，像下面这样写入表格的模板：
html<table id="employeeTable" border="1"><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>薪资</th></tr></thead><tbody></tbody></table>
表格有一个thead和一个tbody，前者显示表格的列名，后者用于填充每行的数据。接下来在javascript中写入代码：
javascriptvar employeeTable = document.getElementById("employeeTable");var tbody = employeeTable.tBodies[0];for(var i = 0; i < employees.length; i++) {var row = tbody.insertRow(i);var cell1 = row.insertCell(0);var cell2 = row.insertCell(1);var cell3 = row.insertCell(2);var cell4 = row.insertCell(3);cell1.innerHTML = employees[i].id;cell2.innerHTML = employees[i].name;cell3.innerHTML = employees[i].age;cell4.innerHTML = employees[i].salary;}以上代码，首先获取到表格元素和tbody元素，再通过循环遍历员工信息数组，使用insertRow和insertCell方法动态生成每一行中的每一列，最后使用innerHTML将员工信息填充进每个单元格。
需要注意的是，在每个单元格中填充文本时，innerHTML不会对动态输入的文本进行编码。这意味着，如果数据中包含html特殊字符（例如“<”、“>”、“&”等），将会以原始形式呈现，而不是被转义。
为了解决这个问题，在应用中可以使用一些工具库，如jQuery、React、Vue等，这些库使用的技术可以防止xss攻击。
在React中，可以使用JSX语法，在需要填充的数据上直接编号。如：
javascriptconst employees = [{ id: 1, name: "张三", age: 25, salary: 5000 },{ id: 2, name: "李四", age: 30, salary: 6000 },{ id: 3, name: "王五", age: 35, salary: 7000 }];const TableRow = (props) => {const { row } = props;return (<tr><td>{row.id}</td><td>{row.name}</td><td>{row.age}</td><td>{row.salary}</td></tr>);};const TableBody = (props) => {const { rows } = props;return (<tbody>{rows.map((row) => <TableRow key={row.id} row={row} />)}</tbody>);};const EmployeeTable = (props) => {const { employees } = props;return (<table><thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>薪资</th></tr></thead><TableBody rows={employees} /></table>);};ReactDOM.render(<EmployeeTable employees={employees} />, document.getElementById("root"));以上代码，使用React的组件化思想分离表格组件，其中表格行、表格数据都封装成组件，将单个单元格的内容作为组件属性直接传递，使得代码更加简洁、易懂和易扩展。
总的来说，在javascript中填充表格非常简单，只需要获取到表格元素和tbody元素，使用DOM操作遍历数据并动态生成每一行的HTML代码即可。同时，在填充数据时需要注意输入文本的编码问题，可以使用一些工具库来防止xss攻击。为增强应用的可读性和可维护性，可以使用React等库的组件化思想来封装表格组件。
上一篇：javascript中对象由什么组成
下一篇：javascript中定义字典
