2015-12-08 14 views
6

Ich habe eine Tabellenzeile, die ein onclick-Ereignis wie folgt angibt.Deaktivierung des On-Click-Ereignisses

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

Und es gibt viele Tabellendaten in der Tabellenzeile und es gibt auch mehrere Zeilen.

Hier ist meine Anforderung, dieses Onclick-Ereignis nur für eine Tabelle Daten zu deaktivieren, aber es für die ganze Zeile aktiv.

Gibt es irgendwelche war das Onclick-Ereignis für nur eine Tabelle Daten zu deaktivieren.

bearbeiten

Tabelle weiter unten.

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

Und das Onclick-Ereignis muss auf erste <td> deaktiviert werden, die ein Checkbox ist.

+0

Su Gibt es da, aber da Sie fast alles HTML weggelassen haben, wissen wir nicht, welche Klassen, IDs oder andere Attribute diese Zeile hat? – adeneo

+0

@adeneo: Tabellenbeispiel hinzugefügt. –

Antwort

6

Sie können eine Klasse zuweisen, die die folgende Regel hat:

.off { pointer-events: none; }

auf jedes Element es unclickable machen.

eine Klasse verwenden klicken zu ermöglichen, wenn gewünscht:

.on { pointer-events: auto; }

Die Schnipsel zeigt dies, indem eine Anzahl 1 bis 4 dann off Eingabe oder auf

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

Sie können onclick="return false" verwenden, um Klicks zu deaktivieren, und oncontextmenu="return false", um Rechtsklick zu deaktivieren.

Eg.

<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> 
Verwandte Themen