Question

在下面的代码中，我希望我的数据以表的形式表示，但未以表的形式显示。我该怎么办，我的数据在表中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graphics-select">
  <div>
    <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-one-name" value="' . $mono_gram_font_graphic_1_sku . '" />
    <label for="graphic-one-name"><img class="image-one-graphics"  alt="" height="auto" width="auto" />One</label>
  </div>
  <div>
    <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-two-name" value="' . $mono_gram_font_graphic_2_sku .'" />
    <label for="graphic-two-name"><img class="image-two-graphics"  alt="" height="auto" width="auto" />Two</label>
  </div>
  <div>
    <input class="graph-init" type="radio" name="graphic-one-name" id="graphic-three-name" value="' . $mono_gram_font_graphic_3_sku .'" />
    <label for="graphic-three-name"><img class="image-three-graphics" alt="" height="auto" width="auto" />Three</label>
  </div>


  <div class="parent">
    <div class="one">
      <img src="abc.jpg">
    </div>
    <div class="two">
      <img src="xyz.jpg">
    </div>
    <div class="three">
      <img src="ghk.jpg">
    </div>

  </div>

  <input type="text" id="testing" value="test" class="imagerep">

我的控制台显示类似这样的内容。

                $("#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>");

Answer 1

不完全可以这样。

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

Answer 2

//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>");

HTML表格未形成

2 个答案: