Fatal编程技术网
  • javascript/
  • Javascript 如何附加表行取决于选择值？

Javascript 如何附加表行取决于选择值？

javascript

Javascript 如何附加表行取决于选择值？,javascript,Javascript,我有一个选择框和一个有10行的表格 <select id="selVal"> <option>10</option> <option>20</option> <option>30</option> </select> 试试这个： $（文档）.ready（函数（）{ $（“#示例”）.DataTable（）； } ); 名称 位置 办公室 年龄 开始日期 薪水 名称 位置

我有一个选择框和一个有10行的表格

<select id="selVal">
    <option>10</option>
    <option>20</option>
    <option>30</option>
</select>

试试这个：

$（文档）.ready（函数（）{
$（“#示例”）.DataTable（）；
} );


名称
位置
办公室
年龄
开始日期
薪水
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
营业员
旧金山
59
2012/08/06
$137,500
罗娜·戴维森
集成专家
东京
55
2010/10/14
$327,900
科琳赫斯特
Javascript开发人员
旧金山
39
2009/09/15
$205,500
索尼娅·弗罗斯特
软件工程师
爱丁堡
23
2008/12/13
$103,600
杰娜·盖恩斯
办公室经理
伦敦
30
2008/12/19
$90,560
奎因·弗林
支撑导线
爱丁堡
22
2013/03/03
$342,000
查尔德·马歇尔
区域主任
旧金山
36
2008/10/16
$470,600
海莉·肯尼迪
高级市场设计师
伦敦
43
2012/12/18
$313,500
塔蒂亚娜·菲茨帕特里克
区域主任
伦敦
19
2010/03/17
$385,750
迈克尔·席尔瓦
营销设计师
伦敦
66
2012/11/27
$198,500
柏德
首席财务官（CFO）
纽约
64
2010/06/09
$725,000
格洛丽亚·利特尔
系统管理员
纽约
59
2009/04/10
$237,500
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$132,000
戴里奥斯
人事领导
爱丁堡
35
2012/09/26
$217,500
杰内特·考德威尔
开发领导
纽约
30
2011/09/03
$345,000
尤里浆果
首席营销官（CMO）
纽约
40
2009/06/25
$675,000
凯撒万斯
售前支持
纽约
21
2011/12/12
$106,450
多丽丝·怀尔德
营业员
西德尼
23
2010/09/20
$85,600
当归
首席执行官（CEO）
伦敦
47
2009/10/09
$1,200,000
加文·乔伊斯
开发商
爱丁堡
42
2010/12/22
$92,575
张珍妮弗
区域主任
新加坡
28
2010/11/14
$357,650
布伦登·瓦格纳
软件工程师
旧金山
28
2011/06/07
$206,850
菲奥娜绿色
首席运营官（COO）
旧金山
48

var selVal = document.getElementById('selVal');

selVal.addEventListener('change', function(){
    var sel = selVal.value; 
    // append table row to the table
}



<body>
    <select id="selVal">
    <option>10</option>
    <option>20</option>
    <option>30</option>
</select>
  </body>



// Code goes here
window.onload = function() {
 var selVal = document.getElementById('selVal');

selVal.addEventListener('change', function(){ 
   // append table row to the table
   var value = document.getElementById("selVal").value;


   var tables = document.getElementsByTagName("TABLE");
   console.log(tables);

    var body = document.getElementsByTagName('body')[0];
   for (var i=tables.length-1; i>=0;i-=1)
   if (tables[i]) tables[i].parentNode.removeChild(tables[i]);
    var tbl = document.createElement('table');

     tbl.style.width = '100%';
    tbl.setAttribute('border', '1');
    var tbdy = document.createElement('tbody');
    for (var i = 0; i < value; i++) {
        var tr = document.createElement('tr');
                var td = document.createElement('td');
                td.appendChild(document.createTextNode('\u0020'))
                td.setAttribute('rowSpan', '2');
                tr.appendChild(td)

        tbdy.appendChild(tr);
    }
    tbl.appendChild(tbdy);
    body.appendChild(tbl);
});

};



Row
      <select id="howmany4D">
        <option>10</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
      </select>
      <table id="table4d">

      </table>
      <div class="buttons">
        <button>Kirim</button>
        <button>Hapus</button>
      </div>
    </div>



checkAll4D = document.getElementById('checkAll4D');
    checkThis4D = document.getElementsByName('checkThis');
    howmany4D = document.getElementById('howmany4D');

howmany4D.addEventListener('change', function() {
  deleteRows();
howmany4D = document.getElementById('howmany4D');
 var table4d = document.getElementById('table4d');
  table4d.style.width = '100%';
   table4d.setAttribute('border', '1');
    for(var i = 0; i < howmany4D.value; i++) {

        var tr = document.createElement('tr');
        var td1 = document.createElement('td');

        var chkbox = document.createElement('input');
        chkbox.type = "checkbox";
        chkbox.id = "checkThis";
        chkbox.name = "checkThis";

        td1.appendChild(chkbox);
        tr.appendChild(td1)

        for (var inputNeeded = 0 ; inputNeeded< 5 ; inputNeeded++) {

          var td = document.createElement('td');
          var text = document.createElement('input');
          text.type = "text";
          text.disabled = "true";      
          td.appendChild(text);
          tr.appendChild(td)            
        }
        table4d.appendChild(tr);
       }
});

for(var i = 0; i < checkThis4D.length; i++) 
  checkThis4D[i].addEventListener('change', hearSome);

function hearSome() {
    var parentOf = this.parentNode.parentNode;
    var inputs = parentOf.querySelectorAll('input[type=text]');

    if(this.checked)
        for(var x = 0; x < inputs.length; x++) inputs[x].removeAttribute('disabled');
    else
        for(var x = 0; x < inputs.length; x++) inputs[x].setAttribute('disabled', true);
}

function deleteRows () {
  var tableHeaderRowCount = 1;
  var table = document.getElementById('table4d');
  var rowCount = table.rows.length;
  for (var i = tableHeaderRowCount; i < rowCount; i++) {
      table.deleteRow(tableHeaderRowCount);
  }
}