JS在HTML表中追加行

我有一個隱藏的字段有一些值，我必須在HTML表中追加這些值。表中的列數是固定的。我已成功追加，但在第一行後，它應該在新行中追加數據，而不是在同一行追加。這就是我正在做的JS在HTML表中追加行

$("#btntbl").click(function() { 
       debugger 
       var tabl = $("#testTable"); 
       var vals = $("#txthidden").val(); 
       for (var i = 0; i < vals.split(";").length; i++) {      
         for (var j = 0; j < vals.split(";")[i].split(",").length; j++) { 
         tabl.append("<td>" + vals.split(";")[i].split(",")[j] + "</td>"); 
        } 
       } 
      });

還要注意，有些用戶不具有禁用列的值 JS Fiddle 我怎麼能每次點擊按鈕添加新行？

來源

2015-04-12 Syed Salman Raza Zaidi

您需要拆分了兩次，而且每行創建tr：

$("#btntbl").click(function() { 
 

 
    var tabl = $("#testTable"), 
 
     vals = $("#txthidden").val(), 
 
     rows = vals.split(';'), 
 
     columns, i; 
 

 
    for (i = 0; i < rows.length; i++) { 
 
    columns = rows[i].split(','); 
 
    tabl.append(
 
     '<tr>' + 
 
      '<td>' + columns[0] + '</td>' + 
 
      '<td>' + columns[1] + '</td>' + 
 
      '<td>' + (columns[2] || '') + '</td>' + 
 
     '</tr>' 
 
    ); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" id="btntbl" value="Export to table"> 
 
<input type="hidden" value="User1,pwd1;User2,pwd2,disabled;User3,pwd3,disabled;User4,pwd4" id="txthidden" /> 
 
<table id="testTable" border="2"> 
 
    <thead valign="top"> 
 
     <tr> 
 
      <th>User</th> 
 
      <th>Password</th> 
 
      <th>Disabled</th> 
 
     </tr> 
 
    </thead> 
 
</table>

來源

2015-04-12 12:48:47 dfsq

感謝兄弟，這是根據我需要工作 –

@ dsfq：你不覺得模板，我們應該使用Angular js或小鬍子，處理酒吧，而不是Speghetti jQuery代碼？ –

@ jQuery.PHP.Magento.com對於更復雜的應用程序肯定。但在這種情況下，我不知道OP的設置，所以我不能在沒有真正需要的情況下引入一個更多的依賴關係。對於這個簡單的例子，我會去字符串連接。 – dfsq

通過添加一行

只是改變目標

變化

var tabl = $("#testTable");

要

var tabl = $('<tr>'); 
$("#testTable").append(tab1);

來源

2015-04-12 12:45:25 charlietfl

jsFiddle demo

$("#btntbl").click(function() {     
    var parts = $("#txthidden").val().split(";"), i=0; 
    for (;i<parts.length;) { 
     var j=0, tr="<tr>", subParts=parts[i++].split(",");   
     for (;j<3;) tr += "<td>" + (subParts[j++]||"") +"</td>"; // concatenate 
     $("#testTable").append(tr +"</tr>");     // Append once 
    } 
});

來源

2015-04-12 12:46:52

其工作，但其附加用戶1，Pwd1然後用戶2，pwd2在同一行，我需要用戶1，PWd1在第一排，然後用戶2，Pwd2在第二排 –

@SyedSalmanRazaZaidi編輯。（移動'「」'東西里面的for循環） –

你忘了TD標籤，只需使用開放標籤TD前和結束

來源

2015-04-12 12:52:00

關閉這裏是你如何做到這一點

var convertToTable = function (val) { 
    val = val.split(';'); 
    val = val.map(function (v) { 
     v = v.split(','); 
     if (v.length === 2) v[v.length] = 'NA'; 
     return '<td>' + v.join('</td><td>') + '</td>'; 
    }); 
    val = '<tr>' + val.join('</tr><tr>') + '</tr>'; 
    return val; 
}

然後

tabl.html(convertToTable(vals));

演示here

來源

2015-04-12 12:56:39 Exception

JS在HTML表中追加行

回答

相關問題