テキストとともにテキストをテキストにテーブルに追加する（tbody）

テーブルのセルにテキストボックスを動的に作成する必要があるという問題があります。私はDBからフェッチしているデータと一緒に。テキストとともにテキストをテキストにテーブルに追加する（tbody）

それはのようなものでなければなりません：

行数は動的であり、私は配列を使用して生成することができています。私は各行のレコードの配列にすべての値をキャプチャし、それをテーブルにプッシュします。しかし、私は空のテキストボックスを追加するために何をすべきか分かりません。

"テキストボックス"を配列に追加して、テキストと共にテーブルセルに挿入できると思っていました。他にどのようなオプションがあるのかよく分かりません。

私は答えを得るのに役立つかもしれない質問をお答えしています。

EDIT：以下 Iテーブルを生成するために使用されるコードである：

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は、2次元アレイです。配列内の各要素には、表の1行分のすべてのデータが含まれます。次の配列要素には、次の行のデータが含まれています。私は各行にテキストボックスを挿入したい。 TIA

出典

2016-05-26 disp_name

いくつかのコードの共有はどうでしょうか？おそらくあなたはそのテーブルを構築するために使用するコードですか？ –

は、動的にテーブルを生成するために使用したコードを追加しました –

私は、レコードを動的に作成するためのあなたの答えと思います。

<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>

出典

2016-05-26 11:06:04

テキストとともにテキストをテキストにテーブルに追加する（tbody）

答えて

関連する問題