HTML TABLE не формируется - PullRequest
Новая
       3

HTML TABLE не формируется

0 голосов
/ 05 июля 2018

в приведенном ниже коде я хочу, чтобы мои данные были представлены в виде таблицы, но они не отображаются в виде таблицы. Что мне делать, чтобы мои данные были в таблице. 

                $("#t1").append("<table>");
                $("#t1").append("<tr> <th> Book Name </th> <th> Publisher Name </th> <th> Publish Year </th> </tr>");
                for (var j = 0; j < 10; j++)
                { 
                    $("#t1").append("<tr>" + "<td>" + e[j].bookName + "</td>" + "<td>" + e[j].publisherName + "</td>" + "<td>" + e[j].publishYear + "</td>" + "</tr>");
                }
                $("#t1").append("</table>");

моя консоль показывает что-то вроде этого. 

  <div id = t1>
   <table></table>
   <tr>...</tr>
   <tr>...</tr>
   .
   .
   .
 </div>

Ответы [ 2 ]

0 голосов
/ 05 июля 2018 
//html//
     <div class="table-responsive"> 
    <table id="tbllogin" class='table table-hover table-bordered mt20'> 
    </table> 
    </div>



   //js//

    var arr = JSON.parse(r.d);
    $("#tbllogin").html(''); 
    $("#tbllogin").append("<thead><tr><th>UserName</th><th>Password</th><th>EmailId</th>" + "</tr></thead><tbody>"); 
    for (var i = 0; i < arr.Table.length; i++)
         { 
    var obj = arr.Table[i]; 
    $("#tbllogin").append("<tr>" + "<td>" + arr.Table[i].AUsername + "</td>" + "<td>" + arr.Table[i].APassword + "</td>" + "<td>" + arr.Table[i].AEmailId + "</td>" + "</tr>");
     }
             $("#tbllogin").append("</tbody>");
0 голосов
/ 05 июля 2018

Не совсем, но вы можете так что-то вроде этого. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var email = $("#email").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
            $("table tbody").append(markup);
        });
        
        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
            	if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<body>
    <form>
        <input type="text" id="name" placeholder="Name">
        <input type="text" id="email" placeholder="Email Address">
    	<input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" name="record"></td>
                <td>Peter Parker</td>
                <td>peterparker@mail.com</td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button>
</body> 
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...