Làm thế nào để tắt và kích hoạt bảng HTML bằng javascript?

Tôi muốn biết làm cách nào để tắt và bật đánh dấu trên bảng HTML bằng cách sử dụng javascript bằng cách nhấp vào nút html.Làm thế nào để tắt và kích hoạt bảng HTML bằng javascript?

Dưới đây là mã của tôi:

tabletest.html

<html> 
<head> 
<script type="text/javascript"> 
function disableTable() { 
    document.getElementbyId('tblTest').disabled = true; 
} 

function enableTable() { 
    document.getElementbyId('tblTest').disabled = false; 
} 
</script> 

<style type="text/css"> 
table#tblTest { 
    width: 100%; 
    margin-top: 10px; 
    font-family: verdana,arial,sans-serif; 
    font-size:12px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #666666; 
    border-collapse: collapse; 
} 

table#tblTest tr.highlight td { 
    background-color: #8888ff; 
} 

table#tblTest tr.normal { 
    background-color: #ffffff; 
} 

table#tblTest th { 
    white-space: nowrap; 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #dedede; 
} 

table#tblTest td { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #ffffff; 
} 
</style> 
</head> 

<body> 
<table id="tblTest"> 
    <thead> 
    <tr> 
    <th>Name</th> 
    <th>Address</th> 
    </tr> 
</thead> 
<tbody> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Tom</td>  
     <td>UK </td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Hans</td> 
     <td>Germany</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Henrik</td> 
     <td>Denmark</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Lionel</td> 
     <td>Italy</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Ricardo</td>  
     <td>Brazil</td> 
    </tr> 
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
     <td>Cristiano</td> 
     <td>Portugal</td> 
    </tr> 
</tbody> 
</table> 
<input type="button" onclick="disableTable();" value="Disable" /> 
<input type="button" onclick="enableTable()" value="Enable" /> 
</body> 
</html>

Bất cứ khi nào tôi bấm nút Disable làm nổi bật bảng vẫn được kích hoạt. Tôi rất mới mẻ với điều này vì vậy tôi thực sự cần sự giúp đỡ của bạn.

Nguồn

2011-10-26 NinjaBoy

'disabled' có nghĩa là điều khiển biểu mẫu sẽ không được gửi và không thể chỉnh sửa được. Bàn không phải là điều khiển biểu mẫu, vì vậy những gì bạn đang yêu cầu không có ý nghĩa. – Quentin

Đây là những gì tôi muốn xảy ra. Khi tôi nhấp vào nút 'Tắt', tôi muốn làm nổi bật hàng và tất cả các hiệu ứng sẽ bị xóa. – NinjaBoy

<html> 
<head> 
<script type="text/javascript"> 
disable = new Boolean(); 
function highlight(a) { 
    if(disable==false)a.className='highlight' 
} 

function normal(a) { 
    a.className='normal' 
} 
</script> 

<style type="text/css"> 
table#tblTest { 
    width: 100%; 
    margin-top: 10px; 
    font-family: verdana,arial,sans-serif; 
    font-size:12px; 
    color:#333333; 
    border-width: 1px; 
    border-color: #666666; 
    border-collapse: collapse; 
} 

table#tblTest tr.highlight td { 
    background-color: #8888ff; 
} 

table#tblTest tr.normal { 
    background-color: #ffffff; 
} 

table#tblTest th { 
    white-space: nowrap; 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #dedede; 
} 

table#tblTest td { 
    border-width: 1px; 
    padding: 8px; 
    border-style: solid; 
    border-color: #666666; 
    background-color: #ffffff; 
} 
</style> 
</head> 

<body> 
<table id="tblTest"> 
    <thead> 
    <tr> 
    <th>Name</th> 
    <th>Address</th> 
    </tr> 
</thead> 
<tbody> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Tom</td>  
     <td>UK </td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Hans</td> 
     <td>Germany</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Henrik</td> 
     <td>Denmark</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Lionel</td> 
     <td>Italy</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Ricardo</td>  
     <td>Brazil</td> 
    </tr> 
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
     <td>Cristiano</td> 
     <td>Portugal</td> 
    </tr> 
</tbody> 
</table> 
<input type="button" onclick="disable = true;" value="Disable" /> 
<input type="button" onclick="disable = false;" value="Enable" /> 
</body> 
</html>

Cố định mã của bạn. Sử dụng chức năng để kiểm tra xem nó có bị vô hiệu hóa hay không, sau đó đánh dấu. Nếu có, thì đừng. Đủ đơn giản.

Demo

Nguồn

2011-10-26 07:33:39

Bạn không thể tắt bảng. Bạn muốn đạt được điều gì với điều này? Các bảng được đọc chỉ anyway.

Nếu bạn có thẻ đầu vào trong bảng, bạn có thể tắt từng thẻ một.

Xem thêm "Disabling" an HTML table with javascript

Nguồn

2011-10-26 06:49:32 PiTheNumber

Tôi muốn nó trông giống như một nút html bị vô hiệu hóa. – NinjaBoy

Nhưng một bảng không phải là một nút. Bạn có thể thay đổi lớp bảng và xác định kiểu vô hiệu hóa thông qua CSS:

, CSS: .disabled tr {background-color: gray; } – PiTheNumber

Nếu bạn muốn nó "nhìn" vô hiệu hóa hoặc kích hoạt, thêm các quy tắc lớp đến một style sheet và thêm các lớp học để bàn cho bật hoặc tắt.

function disableTable() { 
    addClassName(document.getElementbyId('tblTest'), 'disabled'); 
} 
function enableTable() { 
    removeClassName(document.getElementbyId('tblTest'), 'disabled'); 
} 

function trim(s) { 
    return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' '); 
} 

function hasClassName (el, cName) { 
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)'); 
    return el && re.test(el.className); 
} 

function addClassName(el, cName) { 
    if (!hasClassName(el, cName)) { 
     el.className = trim(el.className + ' ' + cName); 
    } 
} 

function removeClassName(el, cName) { 
    if (hasClassName(el, cName)) { 
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g'); 
    el.className = trim(el.className.replace(re, '')); 
    } 
}

Nguồn

2011-10-26 06:57:10 RobG

Bạn có thể cho tôi một gợi ý làm thế nào để làm điều này. Im thực sự mới với điều này. Cảm ơn – NinjaBoy

Không thể tắt bảng. Những gì bạn muốn làm là vô hiệu hóa nút đầu vào và có lớp trên Bảng HTML cung cấp loại ảo ảnh mờ dần/xám ra trên sự kiện onclick của nút bạn chọn.

Nguồn

2011-10-26 07:08:23 CPerez721

Bạn có thể cho tôi một gợi ý làm thế nào để làm điều này. Im thực sự mới với điều này. Cảm ơn – NinjaBoy

Thêm lớp học vào bảng HTML của bạn. Nói (table.class) Bây giờ trên sự kiện onclick cho nút mà bạn chọn để có "Vô hiệu hoá" hiển thị trên nó, hãy chắc chắn rằng sự kiện onclick cháy lên các phong cách mới cho bảng html. (Bạn có thể đi một vài tuyến đường ở đây, tức là thuộc tính Opacity của jQuery, CSS3) – CPerez721

Tôi nghĩ đoạn mã RobG viết là cách phức tạp cho một quy trình đơn giản. Không cần REGEX trong vấn đề của anh ta. – CPerez721

Bạn không thể tắt bảng. Bảng chỉ hiển thị dữ liệu - trong HTML bạn chỉ có thể vô hiệu hóa các phần tử biểu mẫu như đầu vào, lựa chọn và văn bản, vì vậy bạn không thể tương tác với chúng nữa (ví dụ: nhập dữ liệu vào đó, bấm vào nó hoặc chọn một tùy chọn).

Tôi nghĩ rằng những gì bạn đang cố gắng đạt được là có các sự kiện trênMouseOver/-Out xóa khi nhấp vào nút? Bạn có thể nên sử dụng jQuery - hãy xem Events. Giải pháp là thêm và xóa các sự kiện trên nút bấm như trong fiddle này.

Nguồn

2011-10-26 07:13:54 Peavey

Làm theo công thức này:

Xác định hai bộ quy tắc CSS. Một bộ quy tắc luôn luôn bắt đầu với table.enabled, khác với table.disabled

Để bật/tắt toàn bộ bảng, xác định vị trí các phần tử DOM (sử dụng document.getElementbyId('tblTest') khi bảng có các idtblTest) và giao cho lớp tương ứng:

document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';

Nguồn

2011-10-26 07:15:18

Nếu bạn muốn đặt bảng "không thể nhấp vào" ở bất kỳ nơi nào trên đó - bạn có thể thêm div vượt trội ở trên có cùng kích thước.

Nguồn

2011-10-26 07:17:58

Điều này sẽ xóa sự kiện onmouseover khỏi tr của bạn.

function disableTable() { 
    var rows = document.getElementsByTagName("tr"); 
    for (var i = 0; i < rows.length; i++) { 
    rows[i].onmouseover= null; 
    } 
    }

Nguồn

2011-10-26 07:30:57 roel

Các vấn đề liên quan

Làm thế nào để tắt và kích hoạt bảng HTML bằng javascript?

Trả lời

Các vấn đề liên quan