2015-12-08 29 views
6

Bir onclick olayını aşağıdaki gibi belirten bir tablo satırım var.On-click Olayı devre dışı bırakılıyor

onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')" 

Tablo satırında birçok tablo verisi var ve ayrıca çok sayıda satır var.

Buradaki gereksinim, bu onclick olayını yalnızca bir tablo verisinde devre dışı bırakmak, ancak tüm satır için etkin tutmaktır.

Sadece bir tablo verisi için onclick olayını devre dışı bırakmak için herhangi bir var mıydı?

Düzenleme

Tablo aşağıda gösterildiği.

<html> 
<head> 

<script> 
function dispStudRequest(val, val1) 
{ 
    document.location.href="/student/Studentdetails.jsp?u_StudentID="+val+"&u_rollnoNumber="+val1; 
} 
</script> 
</head> 
<body> 

<table> 
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')"> 
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td> 
    <td><img style="width="15" height="15"; <%=iSrc%>></td> 
    <td>Student1</td> 

</tr> 
<tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')"> 
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td> 
    <td><img style="width="15" height="15"; <%=iSrc%>></td> 
    <td>Student2</td> 

</tr> 
</table> 
</body> 
</html> 

Ve onclick olay ihtiyacı onay kutusu olan ilk <td> üzerine devre dışı bırakılması.

+0

Su var, ama sadece tüm HTML'yi dışarıda bıraktığınız için, bu satırın hangi sınıflara, kimliğe veya diğer özelliklere sahip olduğunu bilmiyoruz? – adeneo

+0

@adeneo: Tablo örneği eklendi. –

cevap

6

Aşağıdaki kuralı olan bir sınıf atayabilirsiniz:

.off { pointer-events: none; }

tıklanamayan bunu oluşturulmasında bir elemana.

istenilen zaman tıklayın etkinleştirmek için bir sınıfını kullanın:

.on { pointer-events: auto; }

pasajı kapalı sonra bir numara 4'e girerek veya bu gösteriyor

function toggleTD(pos, state) { 
 
    var anchors = document.querySelectorAll('a'); 
 
    var tgt = anchors[pos - 1]; 
 
    if (state === 'on') { 
 
    tgt.classList.remove('off'); 
 
    tgt.classList.add('on'); 
 
    } else { 
 
    tgt.classList.add('off'); 
 
    tgt.classList.remove('on'); 
 
    } 
 
    return false; 
 
} 
 

 
var btn = document.getElementById('btn'); 
 

 
btn.addEventListener('click', function(event) { 
 
    event.preventDefault(); 
 
    var inp1 = document.getElementById('inp1').value; 
 
    var inp2 = document.getElementById('inp2').value; 
 
    return toggleTD(inp1, inp2); 
 
}, false);
body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 
table { 
 
    border: 1px solid #000; 
 
    width: 80%; 
 
    height: 50%; 
 
} 
 
td { 
 
    border: 1px solid red; 
 
} 
 
a { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-size: 1em; 
 
    text-align: center; 
 
    padding-top: calc(50% - .5em); 
 
    display: block; 
 
} 
 
.on { 
 
    pointer-events: auto; 
 
    background-color: green; 
 
} 
 
.off { 
 
    pointer-events: none; 
 
    background-color: red; 
 
} 
 
input { 
 
    width: 2em; 
 
    margin-top: 5px; 
 
    padding: 0 3px; 
 
    text-align: center; 
 
}
<table> 
 
    <tr> 
 
    <td><a href="/">CLICK</a> 
 
    </td> 
 
    <td><a href="/">CLICK</a> 
 
    </td> 
 
    <td><a href="/">CLICK</a> 
 
    </td> 
 
    <td><a href="/">CLICK</a> 
 
    </td> 
 
    </tr> 
 
</table> 
 
<label>Position</label> 
 
<input id="inp1"> 
 
<label>On/Off</label> 
 
<input id="inp2"> 
 
<button id="btn">ToggleTD</button>

2

Tıklamaları devre dışı bırakmak için onclick="return false" ve sağ tıklamaları devre dışı bırakmak için oncontextmenu="return false" kullanabilirsiniz.

Ör.

<table onclick="return false" oncontextmenu="return false"> 
    <tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')"> 
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td> 
    <td><img style="width="15" height="15"; <%=iSrc%>></td> 
    <td>Student1</td> 
    </tr> 
    <tr onclick="dispStudRequest('<%=u_studentRequestID%>','<%=rollno%>')"> 
    <td><input type="checkbox" name="checkBoxVer" value="<%=seqno%>" onClick="return checkClick(this);" CHECKED></td> 
    <td><img style="width="15" height="15"; <%=iSrc%>></td> 
    <td>Student2</td> 
    </tr> 
</table> 
İlgili konular