javascript - 将文本框连同文本添加到 HTML 中的表格 (tbody)

标签 javascript jquery html css

我遇到了一个问题，我必须在表格单元格中动态创建文本框。以及我从数据库中获取的数据。

它应该是这样的: enter image description here

行数是动态的，我可以使用数组生成它。我将所有值捕获到每一行的记录数组中，并将其插入表中。但我不知道如何添加空文本框。

我在想是否可以将“文本框”添加到数组中并与文本一起插入到表格单元格中。我不确定还有哪些其他选项可用。

我愿意回答任何可能帮助我得到答案的问题。

编辑: 下面是我用来生成表格的代码:

function generateTable(fundDetails){
  var tbody_holder = document.getElementById("tbody_holder");
  for(var row = 0; row < fundDetails.length; row++){
    var tr = document.createElement("tr");
    for(var col = 0; col < fundDetails[row].length; col++){
      var td = document.createElement("td");
      var tn = document.createTextNode(fundDetails[row][col]);
      td.appendChild(tn);
      tr.appendChild(td);
    }
  tbody_holder.appendChild(tr);
 }
}

fundDetail 是一个二维数组。数组中的每个元素都包含表格一行的所有数据。下一个数组元素包含下一行的数据。我想在每一行中插入文本框。 时间差

最佳答案

我认为这将是您动态创建记录的答案。 

<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-control" content="no-cache">
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/canvasjs.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.css">
<script src="jquery/jquery-ui.js"></script>
<script type="text/javascript" src="jquery/html2canvas.min.js"></script>
<script type="text/javascript" src="jquery/jquery.plugin.html2canvas.js"></script>
<link rel="stylesheet" href="jquery/jquery-ui.css"> 
  <style>
  input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0;  
}
input[type="text"], input[type="number"] {
    border: none;

}
tbody tr{
background:#f7f7f7;
}
.navbar{
border-radius:0px !important;
border:none;

}
thead{
background:#8b99a0;
color:white;
}
.navbar{
background:#323E4E;
}
table{
border-radius:4px !important;
}
a.canvasjs-chart-credit {
    display: none;
}
#chartContainer{
border-bottom:1px dashed #8b99a0;
border-right:1px dashed #8b99a0;
}
.stuck{
    position:fixed;
    z-index:100;
    width:100%;
    top:0;
}
hr {
     margin-top: 0px; 
    margin-bottom: 0px;
}   
  </style>
  <script>

$(window).scroll(function() {
    if ($(window).scrollTop() > 50) {
        $("#bar").addClass('stuck');
    } else {
        $('#bar').removeClass('stuck');
    }
});

</script>
</head>
<body>
<nav class="navbar navbar-inverse" id="bar">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span> 
            </button>
            <img src="images/records.png" style="width:50px;height:45px;float:left;" class="navbar-logo">
            <a class="navbar-brand" href="#" title="calculation">Student Records</a>
        </div>
    </div>
</nav>
    <div class="container">
        <div class="row">
        <div class="col-md-12">
        <h2 style="text-align:center;color: #323E4E;">Student marksheet</h2>
        </div>
        <div class="col-md-12" style="margin-bottom:2px;">
    <div class="col-md-2">
        <button class="btn btn-primary" id="addbtn" style="float:left;margin-right:10px;"><i class="fa fa-user-plus" aria-hidden="true"></i> Add Row</button>

    </div>
    <div class="col-md-8">
            <div class="form-group">
                <input type="text" class="search form-control" id="search" placeholder="What you looking for?" style="box-shadow:5px 5px 5px #f7f7f7;">
            </div>
    </div>
    <div class="col-md-2">
        <button class="btn btn-primary" id="btnExport" style="float:right;"><a style="text-decoration:none;color:#fff;"><i class="fa fa-download"></i> Download</span></a></button>
    </div>
</div>
<div class="col-md-12" style="margin-bottom:30px !important;">
        <div class="col-md-10">
        <div id="dvData">
<table class="table table-hover" id="tblData">
<thead>
<tr>
    <th>Id</th>
    <th>Name</th>
    <th>Mark1</th>
    <th>Mark2</th>
    <th>Total</th>
    <th>Average</th>
    <th>Status</th>
    </tr>
</thead>
<tbody id="frm">
</tbody>
</table>
</div>
</div>

<div class="col-md-2">
<label>Result Chart</label>
<hr>
    <div id="chartContainer" style="width:100%;height:200px;"></div>
    </div>
</div>
</div>
</div>
</body>
<script>
        var aa=0, z=1, numb=1, id="ping";
        var x, ab ,bc,cd,tr,ty,tg,we ,er;
        var id1,id2,id0,stat="mark",num="1";
        var mnc="avg",mno="total", abcd=1;
        var msg="status",pa=0,fa=0, stanum;
$("#addbtn").click(function(e){

    var i=aa;
    var zz=z+aa;
    for(i;i<zz;i++){
    var head= document.createElement("TR");
    ab="tear";
    bc=zz;
    cd=ab.concat(bc);
    head.setAttribute("id",cd);
    document.getElementById("frm").appendChild(head);

    var did= document.createElement("TD");
    var pin=id.concat(numb);
    did.setAttribute("id",pin);
    document.getElementById(cd).appendChild(did);
    document.getElementById(pin).innerHTML=numb;
    numb++;

    for(var p=0;p<6;p++){
    if(p<3){
        var lab= document.createElement("TD");
        tr="tead";
        ty=p;
        we=zz;
        er=tr.concat(ty);
        tg=er.concat(we);
        lab.setAttribute("id",tg);
        document.getElementById(cd).appendChild(lab);
    }else if(p==3)
    {
        var lab= document.createElement("TD");
        tr="tead";
        ty=p;
        we=zz;
        er=tr.concat(ty);
        tg=er.concat(we);
        lab.setAttribute("id",tg);      
        var ctot=mno.concat(abcd); 
        lab.setAttribute("id",ctot);
        document.getElementById(cd).appendChild(lab);
    }else if(p==4)
    {
        var lab= document.createElement("TD");
        tr="tead";
        ty=p;
        we=zz;
        er=tr.concat(ty);
        tg=er.concat(we);
        lab.setAttribute("id",tg);
        var cpo=mnc.concat(abcd);
        lab.setAttribute("id",cpo);
        document.getElementById(cd).appendChild(lab);
    }else if(p==5)
    {
        var lab= document.createElement("TD");
        var meg=msg.concat(i);

        lab.setAttribute("id",meg);
        document.getElementById(cd).appendChild(lab);   
    }



    if(p==0)
    {
    x= document.createElement("INPUT");
    x.setAttribute("type","text");

    id0=stat.concat(num);
    num++;
    x.setAttribute("id",id0);
    document.getElementById(tg).appendChild(x);
    }else if(p==1)
    {
    x= document.createElement("INPUT");
    x.setAttribute("type","number");

    id1=stat.concat(num);
    num++;
    x.setAttribute("id",id1);
    document.getElementById(tg).appendChild(x);
    }else if(p==2)
    {
    x= document.createElement("INPUT");
    x.setAttribute("type","number");
    id2=stat.concat(num);
    num++;
    x.setAttribute("id",id2);
    document.getElementById(tg).appendChild(x);
    }
}
}
    abcd++;
aa++;

});

var xx;
$("#tblData").change(function(e){
var n=1;var qq=0;xx=0;
for(var rr=1;rr<=aa;rr++){

var m0=stat.concat(n);
n++;

var m1=stat.concat(n);
n++;


var m2=stat.concat(n);
n++;

var az=document.getElementById(m0).value;
document.getElementById(m0).innerHTML=az;

var a=document.getElementById(m1).value;
document.getElementById(m1).innerHTML=a;

var b=document.getElementById(m2).value;
document.getElementById(m2).innerHTML=b;

if(a=="")
{
a=0;
}else if(b==""){
b=0;
}
else{}
var c=Number(a)+Number(b);
var d=(Number(a)+Number(b))/2;
var mp=mno.concat(rr);
document.getElementById(mp).innerHTML=c;
var cp=mnc.concat(rr);

document.getElementById(cp).innerHTML=d;
stanum=msg.concat(qq);

if((a<50)||(b<50)){
document.getElementById(stanum).innerHTML="Fail";
qq++;
}else{
document.getElementById(stanum).innerHTML="Pass";
qq++;
}



 }
xx=qq;
});


$("#tblData").change(function(e){
fa=0,pa=0;
var county=$('#tblData tr').length;

for(var mob=0;mob<county-1;mob++){
   var mom=msg.concat(mob);
   if(document.getElementById(mom).innerHTML=="Pass"){
pa++; 
 }

 if(document.getElementById(mom).innerHTML=="Fail"){
 fa++;
 }
 }

var chart = new CanvasJS.Chart("chartContainer",
    {
        animationEnabled: true,
        title:{
            text: "students vs pass / fail"
        },
        data: [
        {
            type: "column", //change type to bar, line, area, pie, etc
            dataPoints: [
                { label: "pass", y: pa },
                { label: "fail", y: fa }
            ]
        }
        ]
    });

    chart.render();
});


</script>


<script type="text/javascript">
    $("#resbtn").click(function(e){
        html2canvas($("#tblData"), {
            onrendered: function(canvas) {
                theCanvas = canvas;


canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});
            }
        });
    });
</script>
        <script>
$(document).ready(function()
{
    $('#search').keyup(function()
    {
        searchTable($(this).val());
    });
});

function searchTable(inputVal)
{
    var table = $('#tblData');
    table.find('tr').each(function(index, row)
    {
        var allCells = $(row).find('td');
        if(allCells.length > 0)
        {
            var found = false;
            allCells.each(function(index, td)
            {
                var regExp = new RegExp(inputVal, 'i');
                if(regExp.test($(td).text()))
                {
                    found = true;
                    return false;
                }
            });
            if(found == true)$(row).show();else $(row).hide();
        }
    });
}
</script>
    <Script>
$("#btnExport").click(function (e) {
     var dt = new Date();
        var day = dt.getDate();
        var month = dt.getMonth() + 1;
        var year = dt.getFullYear();
        var hour = dt.getHours();
        var mins = dt.getMinutes();
        var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
        //creating a temporary HTML link element (they support setting file names)
        var a = document.createElement('a');
        //getting data from our div that contains the HTML table
        var data_type = 'data:application/vnd.ms-excel';
        var table_div = document.getElementById('dvData');
        var table_html = table_div.outerHTML.replace(/ /g, '%20');
        a.href = data_type + ', ' + table_html;
        //setting the file name
        a.download = 'exported_table_' + postfix + '.xls';
        //triggering the function
        a.click();
        //just in case, prevent default behaviour
        e.preventDefault();
});

</script>
</html>

关于javascript - 将文本框连同文本添加到 HTML 中的表格 (tbody)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37457514/

上一篇：javascript - Gulp js cssmin 问题。无法覆盖现有的缩小文件

下一篇：Java Jsoup按钮选择

相关文章：

php - Javascript/jquery 在 IE8 中不工作

html - 如何制作带有背景图片的固定导航栏？

javascript - 范围问题 - 在基于类的 Controller 中嵌套 $mdDialog

javascript - Canvas 中的链接 (HTML5)

javascript - jQuery .css 背景图像预加载

javascript - AngularJS - ui.calendar 类型错误 : Cannot read property 'length' of undefined

html - CSS Border 属性奇怪的 Bahavier 定位绝对

javascript - 更改嵌套在另一个 HTML 项目中的项目的 innerHTML

javascript - 在不同的div中显示表单结果

javascript - 两组两个变量的概率为 50%

©2024 IT工具网  联系我们