저는 HTML 표가 있고 단추가 있습니다.표의 행 수에 따라 버튼을 숨기거나 표시합니다.
우선 보내기 버튼의 스타일은 style.display="none"이어야합니다.
그러나 표에 행이 하나 이상 있으면 버튼이 표시되어야합니다 (block/inline).
아직 테이블과 버튼을 연결하는 방법을 알지 못합니다. 자바 스크립트를 사용하려고하지만 함수에 대해 생각해야하며 형식 테이블에 적용 할 수있는 함수가 없습니다. 테이블과 버튼 사이의 관계를 찾을 수 없기 때문에 여전히 CSS에 대해 생각하고 있습니다.
테이블을 조정할 때 버튼의 가시성을 토글해야합니다. 그것이 여러면에서 행해질 수 있기 때문에, 당신에게 옳은 것이 무엇인지를 알 수있는 방법이 없습니다.
간략한 설명을 위해 give jQuery a try. 요소에 액세스하고 스타일을 '바닐라'JavaScript보다 훨씬 쉽게 수정합니다. 또한 페이지로드 후 (JavaScript를 통해) 테이블을 업데이트하는 경우 언제든지이를 사용하도록하십시오.
$(document).ready(function(){
if ($("#table > tr").length > 0)
$("#button").show();
else
$("#button").hide();
});
나는 도움이 되길 바랍니다.
버튼이 가장 많이 쓰이는 TD 안에있는 경우. 단순히 통해 액세스 않습니다
td input {
display: none;
}
당신은 내 blog에서 이것에 대해 쓴 CSS3
input[type="button"] {
display: none;
}
이 같은 고급 선택으로 stlye을 정의 할 수 있습니다. 랜스 월의 대답의
myTableRow.childNodes[0];
평범 비 JQuery와 동등한 같은 것을 사용하는 TR 내부에 입력을 선택하려면
var myInput = document.getElementsByTagName('input');
myInput.style.display = none;
으로 입력 필드를 잡을 수있는 자바 스크립트와
것 다음과 같이하십시오.
var button = document.getElementById('the-button');
if (document.getElementById('the-table').getElementsByTagName('tr').length > 0){
button.style.display = 'block';
}else{
button.style.display = 'none';
}
당신은 제 영웅입니다, 톰. ;) – Lance
<html>
<head>
<title>whatever</title>
<style type="text/css">
.hidden {
display: none;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var $t = $('table');
var $h = $t.find('thead');
var $b = $t.find('tbody');
var $s = $('#send');
// the "add" button appends a new row
// into the table body; if the body
// transitions from empty, the "send"
// button is displayed
$('#add').bind('click', function()
{
$b.append(newRow());
if (1 == $b.find('tr').length)
$s.removeClass('hidden');
});
// the remove button removes the last
// row from the table body (if there's
// any); if the body transitions to
// empty, the "send" button is hidden
$('#remove').bind('click', function()
{
$b.find('tr:last').remove();
if (0 == $b.find('tr').length)
$s.addClass('hidden');
});
// generates a table row; this demo
// impl. just copies the heading row
var newRow = function()
{
return $h.find('tr').clone();
};
});
</script>
</head>
<body>
<table border="1">
<thead>
<tr><td>foo</td><td>bar</td></tr>
</thead>
<tbody>
</tbody>
</table>
<input type="button" id="add" value="add" />
<input type="button" id="remove" value="remove" />
<input type="button" id="send" value="send" class="hidden" />
</body>
</html>
테이블이 행으로 어떻게 채워 집니까? Javascript를 사용하고 있습니까? 일부 서버 측 기술 (특정 경우) – bezmax