使用javascript动态添加带有复选框的表格行

最新推荐文章于 2022-10-14 18:33:30 发布

cxygs5788

最新推荐文章于 2022-10-14 18:33:30 发布

阅读量1.5k

点赞数

文章标签： javascript java 前端 ViewUI

标题：使用JavaScript动态添加带有复选框的表格行

作者：Vivek Kapile

电子邮件：已快照

语言：JavaScript

平台：ASP.net中JavaScript

技术：用于ASP.net

级别：初学者

介绍

此代码将为想要学习的初学者提供帮助，帮助他们了解如何通过JavaScript在表中动态创建复选框。

我已经介绍了Java脚本的一小部分，希望对初学者有所帮助。

在编写Java脚本之前，我将简要介绍如何动态创建复选框。

1.为“表”创建一个元素

2.为该行创建一个元素（“ tr”）

3.为“ TD”创建一个元素

4，创建一个类型为（'input'）的元素

5.将属性设置为复选框。

描述：

下面是示例代码。

//JavaScript function to create a checkbox within a table through JavaScript
function CreateCheckBox()
{
   //First create a element for the table
   var tbl = document.createElement('table');
    tbl.border = "1"; 
    //Second create a row
    var row = document.createElement('tr');
    row.className = 'gridrow'; 
    //Third create td element
    td = document.createElement('td');
    td.className = 'gridcell';
    td.style.fontWeight = 'normal';
    td.rowSpan = 1;
    td.style.width = '80px'; 
    //fourth create checkbox in that td element
    var chkbox = document.createElement('input');
    chkbox.type = "checkbox";
    chkbox.id = "chk" ;
    chkbox.name = "chk" ; 
    //Fifth add checkbox to td element
    td.appendChild(chkbox);
    //Add a td into a row
    row.appendChild(td);
    //Finally added to the form to print
    form1.appendChild(tbl);
}