javascript - 使用jquery的行图像,在单击时添加新的html table inside

  显示原文与译文双语对照的内容

我需要添加新的table inside 一个 table,同时单击使用jquery的行图像

表表


+-------------------------------+
|id name place view |
+-------------------------------+
|1 arun abc image1|
|2 jinu def image2|
+-------------------------------+

单击'image1'时,我希望显示单击了行的新 table below

所需输出


+----------------------------------+
|id name place view |
|----------------------------------|
|1 arun abc image1|
| | 
|+--------------------------------+| 
||name fname last name age ||
||--------------------------------||
||arun arun babu 10 ||
|+--------------------------------+|
| |
|2 jinu def image2 |
+----------------------------------+

我试过但没有输出


function validation_over() {
 $.ajax({ 
 type:'post', 
 url: '<?php echo site_url('page_control/main_report');?>',//Posting all data 
 data:{
//fn:"table" 
 district:$('#cbo_district').val(), 
 rpt_nm:$('#cbo_rpt_typ').val(),
 type:$('#rpt_type').val(),
 frm_date:$('#frm_date').val(),
 to_date:$('#to_date').val(),
 },

 dataType: 'json',//Data format 
 success: function(data) {//Receiving data
 if(data.status=="nodata") {
 alert("No data found");
 }

 var sales_tot=0;
 var movie_tot=0;
 var still_tot=0;
 result="<table border='0' name='main_rpt_tbl1' id='main_rpt_tbl' class='table'>";
 result+="<CAPTION><EM>Report:"+data.rpt_nm+"</EM></CAPTION>";

 if(data.typ=="d") {
 result+="<tr><td rowspan='2' colspan='3' style='color:green;'>District:"+data.rate[0].DistrictName+"&emsp;&emsp;&emsp;Date:"+data.frm_dat+"</td></tr><tr></tr>";

 } else {
 result+="<tr><td rowspan='2' colspan='3' style='color:green;'>District:"+data.rate[0].DistrictName+"&emsp;&emsp;&emsp;Date:"+data.frm_dat+"-"+data.to_dat+"</td></tr><tr></tr>";
 }

 result+="<tr><th rowspan='2'>Centre Name</th>";

 if(data.rpt_nm=="Sales Information") {
 result+="<th rowspan='2'>Total Sales</th><th rowspan='2'>View</th></tr><tr></tr>";

 } else {
 result+="<th rowspan='2'>Total Visitors</th><th rowspan='2'>View</th></tr><tr></tr>";
 }

 for(var i=0;i<data.rate.length;i++) {
 CentreID=data.rate[i].CentreID;
 CentreName=data.rate[i].CentreName;
 adult_tot=data.rate[i].adult_tot;
 child_tot=data.rate[i].child_tot;
 foreign_tot=data.rate[i].foreign_tot;

 if(data.rpt_nm=="Sales Information") {
 movie_tot=data.rate[i].movie_tot;
 still_tot=data.rate[i].still_tot;
 }

 tot=parseInt(adult_tot)+parseInt(child_tot)+parseInt(foreign_tot)+parseInt(movie_tot)+parseInt(still_tot);
//result+="<tr onClick=update(this);centre("+ DistrictCd +",'tbl')>";
 result+="<tr>";

 result+="<td>"+CentreName+"</td>";
 result+="<td>"+tot+"</td>";

 result+="<td onClick='onClick=get_data("+CentreID+");' id='q'><img src='<?php echo base_url();?>styles/images/delete.png' title='Delete' width='20' height='20'></td>";
 result+="<td style='display:none'>"+CentreID+"</td>";

 result+="</tr>";
 } 

 result+="</table>";
 $('#main_rpt_tbl').html(result);
 }
 });
}

function get_data(id) {
 var tRow ="<tr><table><tr><td>...</td>...</tr>...</table></tr>";//code for your table
 $(this).parent('tr').after(tRow );
}

时间:

假设图像的类是"图像",你将在cuttent行之后添加一行。


var tRow ="<tr><table><tr><td>...</td>...</tr>...</table></tr>";//code for your table

$('.image').on('click',function(){
 $(this).parent('tr').after(tRow );
})

试试这个可以帮你

HTML


<table id='mytable'><tr><td>id</td><td>name</td><td>place</td><td>view</td></tr>
 <tr><td>1</td><td>A</td><td>C</td><td id='td'>IMG</td></tr>
<tr><td>2</td><td>B</td><td>D</td><td id='td'>IMG</td></tr></table>

Js


var tRow="<tr><td colspan='4'><table id='mytable'><tr><td>id</td><td>name </td><td>name</td><td>age</td></tr><tr><td>1</td><td>ABC</td><td>CDE</td><td>10</td></tr><tr><td>CBD</td><td>ADS</td><td>20</td><td>IMG</td></tr></table></td></tr>";

$('#td').click(function(){ 
$(this).parent('tr').after(tRow );
});

Fiddle Here

试试这个

HTML


<table>
<th>Id</th>
<th>Name</th>
<th>Place</th>
<th>Image</th>
<tr class="row">
 <td>1</td>
 <td>test</td>
 <td>test</td>
 <td class='image'>test</td>
</tr>
<tr class="row">
 <td>1</td>
 <td>test</td>
 <td>test</td>
 <td class='image'>test</td>
</tr>
<tr class="row">
 <td>1</td>
 <td>test</td>
 <td>test</td>
 <td class='image'>test</td>
</tr>

JS


$(document).ready(function(){
 $(".image").click(function(){

 $(this).parent('tr').after("<tr><table><th>name<th/><th>fname<th/><th>lname<th/><th>age<th/><tr><td>abc</td><td>pqr</td><td></td>retest<td>23</td></tr></table></tr>");
 });

});

...