js獲取table中checkbox選中的多行多列的值

時間 2019-11-13

標籤獲取 table checkbox 選中多列欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>獲取表格選中的多行對象</title>
    <script>
     function test() {
     
     	var inputs=document.getElementById("myTable_id").getElementsByTagName("input");
			for(var i=0;i<inputs.length;i++){	
				if(inputs[i].type=="checkbox"){
					if(inputs[i].checked&&inputs[i].name=="chk"){
						var checkedRow=inputs[i];
						 var tr = checkedRow.parentNode.parentNode;
		         var tds = tr.cells;
		         //循環列	         
		        
						for(var j = 1;j < tds.length;j++){		 
									 var str="";             
		               str += "title:"+tds[j].title+ "~ value:"+tds[j].value+"~innerHTML:"+tds[j].innerHTML ;
		               alert(str);                 		             
		            }
						}
						
					}
				}
	}
         
</script>
</head>
<body>
<table id ="myTable_id" width="60%" cellspacing="0" cellpadding="0" align="left" border="1" bordercolordark="#ffffff" bordercolorlight="#B3B5B4" >
    <tbody id="tabstore1">
        <tr>
            <td><input type="checkbox" name="chk"value="123"></td>
            <td title="want u sweet heart!" value="want">b1</td>
            <td>b2</td>
            <td>b3</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk"value="456"></td>
            <td title="love u sweet heart!"  value="love">c1</td>
            <td>c2</td>
            <td>c3</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="chk"value="456"></td>
            <td title="miss u sweet heart!" value="miss">d1</td>
            <td>d2</td>
            <td>d3</td>
        </tr>
    </tbody>
</table>
<input type="button" name="my_button"value="取值" onclick="test();"></input>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。