Question

我有一个像这样的html表：

＆＃13;

<table id="mytable" class="table table-striped">
<tbody>
    <c:forEach items="${listeCollabDeRrh}" var="collab">
        <tr>
            <td>${collab.matricule }</td>
            <td>${collab.nom }</td>
            <td>${collab.prenom}</td>
            <td hidden="true">${collab.bu.getNomBU()}</td>
            <td hidden="true">${collab.contact}</td>
            <td hidden="true">${collab.dateEmbauche}</td>
            <td>
                <p data-placement="top" data-toggle="tooltip" title="Details">
                    <button class="btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details">	<span class="glyphicon glyphicon-text-color"></span>
                    </button>
                </p>
            </td>
        </tr>
    </c:forEach>
</tbody>
</table>

＆＃13;

如果我点击详细信息按钮，我会弹出一个包含行的所有详细信息：

＆＃13;

<div class="modal-body">
<table id="mytable" class="table table-bordred table-striped">
    <thead>
        <th>Matricule</th>
        <th>Nom</th>
        <th>Pronom</th>
        <th>BU</th>
        <th>Contact</th>
        <th>Date d'ambauche</th>
        <th>RRH</th>
    </thead>
    <tbody>
        <tr>
            <td>matricule of collab</td>
            <td>nom of collab</td>
            <td>prenom of collab</td>
            <td>bu of collab</td>
            <td>contact of collab</td>
            <td>dateEmbauche of collab</td>
        </tr>
    </tbody>
</table>

＆＃13;

问题是HTML表格和详细信息弹出窗口位于同一个jsp页面中。我认为我可以使用表单在服务器端使用控制器。

当我按行的详细信息按钮时，如何显示弹出的详细信息？

Answer 1

＆＃13;

$(document).ready(function(){

    $(".detail_button").on("click",function(){
    	var parentTr = $(this).closest("tr");
        var counter = 1;
        $("td", $(parentTr)).each(function(){
        	if(!($(this).hasClass("detail_td"))){
                $(".modal-body tr td:nth-child("+counter+")").text($(this).text());
            	counter++;
            }
        $(".modal-body").show();
		$("#bodytable").hide();
		
        });
    });
	
	$("#hide_popup").on("click",function(){
		$(".modal-body").hide();
		$("#bodytable").show();
	});
    
});

＆＃13;

.modal-body{
    display:none;
    position:absolute;
    top:0;
    left:0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="modal-body">
<input type="button" id="hide_popup" value="Hide Popup"/>
<div style="clear"></div>
<table id="mytable" class="table table-bordred table-striped" border="1">
    <thead>
        <th>Matricule</th>
        <th>Nom</th>
        <th>Pronom</th>
        <th>BU</th>
        <th>Contact</th>
        <th>Date d'ambauche</th>
        <th>RRH</th>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            
        </tr>
    </tbody>
</table>
</div>

<table id="bodytable" class="table table-bordred table-striped" border="1">
    <thead>
        <th>Matricule</th>
        <th>Nom</th>
        <th>Pronom</th>
        <th>BU</th>
        <th>Contact</th>
        <th>Date d'ambauche</th>
        <th>RRH</th>
        <th>Detail</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td class="detail_td">
                <p data-placement="top" data-toggle="tooltip" title="Details">
                    <button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details">	<span class="glyphicon glyphicon-text-color">Detail</span>
                    </button>
                </p>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td class="detail_td">
                <p data-placement="top" data-toggle="tooltip" title="Details">
                    <button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details">	<span class="glyphicon glyphicon-text-color">Detail</span>
                    </button>
                </p>
            </td>
        </tr>
    </tbody>
  </table>

＆＃13;

根据我的理解，您希望在弹出的详细按钮单击中显示相关的行数据。如果没有那么请纠正我 HTML

    <div class="modal-body">
<input type="button" id="hide_popup" value="Hide Popup"/>
<div style="clear"></div>
<table id="mytable" class="table table-bordred table-striped" border="1">
    <thead>
        <th>Matricule</th>
        <th>Nom</th>
        <th>Pronom</th>
        <th>BU</th>
        <th>Contact</th>
        <th>Date d'ambauche</th>
        <th>RRH</th>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>

        </tr>
    </tbody>
</table>
</div>

<table id="bodytable" class="table table-bordred table-striped" border="1">
    <thead>
        <th>Matricule</th>
        <th>Nom</th>
        <th>Pronom</th>
        <th>BU</th>
        <th>Contact</th>
        <th>Date d'ambauche</th>
        <th>RRH</th>
        <th>Detail</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td class="detail_td">
                <p data-placement="top" data-toggle="tooltip" title="Details">
                    <button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details">   <span class="glyphicon glyphicon-text-color">Detail</span>
                    </button>
                </p>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td class="detail_td">
                <p data-placement="top" data-toggle="tooltip" title="Details">
                    <button class="detail_button btn btn-primary btn-xs" data-title="Details" data-toggle="modal" data-target="#Details">   <span class="glyphicon glyphicon-text-color">Detail</span>
                    </button>
                </p>
            </td>
        </tr>
    </tbody>
  </table>

JQUERY

$(document).ready(function(){

$(".detail_button").on("click",function(){
    var parentTr = $(this).closest("tr");
    var counter = 1;
    $("td", $(parentTr)).each(function(){
        if(!($(this).hasClass("detail_td"))){
            $(".modal-body tr td:nth-child("+counter+")").text($(this).text());
            counter++;
        }
    $(".modal-body").show();
    $("#bodytable").hide();

    });
});

$("#hide_popup").on("click",function(){
    $(".modal-body").hide();
    $("#bodytable").show();
});

});

CSS

.modal-body{
    display:none;
    position:absolute;
    top:0;
    left:0px;
}

DEMO：https://jsfiddle.net/daf2rLvh/3/

Answer 2

另一种变体是使用jQuery。只要用户点击按钮，就可以从服务器读取信息。

http://api.jquery.com/jquery.ajax/

为此投入时间，制作更好，更快，数据更薄的应用程序。但如果你不能使用，Farhan有很好的解决方案。

Answer 3

假设它适用于UI上的所有表：

<script>
var cells=document.getElementsbyTagName("td");
for(i=0;i<cells.length;i++){
cells[i].onclick=function(){alert(this.innerHTML);};
}
</script>

保持HTML表结构正常。无需在那儿调用任何函数。

显示一个弹出窗口，其中包含html表中每一行的详细信息

3 个答案: