js动态生成table,如何获取动态table里a标签的自定义属性的所有值？

时间：2023-01-22 20:39:19
动态生成的table,在table里面使用了循环设置，而在标题头里面添加了a标签，a标签内有自定义属性data-type,如何在另一个函数searchChange（）内获取全部的data-type属性值呢？或者说，我该怎么做才能够在searchChange（）函数内对动态的table进行样式的设定呢？求一个方法来解决这个问题。 


	function LayoutChg(layoutid)

				{


					$.ajax({

						url: "/sbadmin2/xml/layout.xml",

						dataType: 'xml',

						type: 'GET',

						timeout: 2000,

						error: function(xml)

						{

							alert("XMLファイル読み込みエラー！");

						},

						success: function(xml)

						{

							$('#dataTables-category').remove();

							var table=$('<table id ="dataTables-category" width="100" class="table table-striped table-bordered table-hover"></table>');

							table.appendTo($("#category"));

							var thead=$("<thead></thead>");

							thead.appendTo(table);

							$(xml).find("layout").each(function(i)

							{

								var id = $(this).attr("id");

								if(id == layoutid){

									$(this).find("th").each(function(j)  {

										var tr=$('<tr id="abc"></tr>');

										tr.attr("id","level"+id);

										id++;

										tr.appendTo(thead);


										$(this).find("colum").each(function(k)  {

											var name = $(this).attr("name");

											var th_colspan = $(this).children("th_colspan").text();

											var th_row = $(this).children("th_rowspan").text();

											var th_cla = $(this).children("th_class").text();

											var th_bgcolor = $(this).children("th_bgcolor").text();


											var a_data_type = $(this).children("a_data_type").text();

											var a_id = $(this).children("a_id").text();

											var a_class = $(this).children("a_class").text();

											var a_style = $(this).children("a_style").text();

											var a_name = $(this).children("a_name").text();


											var th=$("<th colspan = "+th_colspan + " rowspan = " + th_row + " bgcolor = " + th_bgcolor +  " class = " + th_cla +  ">" + name +"<a data-type=" + a_data_type + " id ="+ a_id + " onclick =" + a_class + " style =" + a_style +" > " + a_name + " </a> "+" </th> ");

											th.appendTo(tr);

										  })


									  })

								}else{

										return true;

								}

							});


							var tbody=$("<tbody></tbody>");

							var tbodyDetail ="";

							switch(layoutid)

							{

								case "1":

									tbodyDetail

									break;

								case "2":

									tbodyDetail

									break;

								case "3":

									tbodyDetail

									break;

								case "4":

									tbodyDetail									break;

								case "5":

									tbodyDetai							break;

								case "6":

									tbodyDetail

									break;

							}


							tbodyDetail.appendTo(tbody);

							tbody.appendTo(table);

						}

					});


				}



				function searchChange() {


					var flag =document.getElementById("fold");


					var type =document.getElementById("fold").getAttribute("data-type");

					alert(type);

				}

			</script>

10 个解决方案

#1

附上部分layout.xml内容 


 <layout id="1">

        <th id="th">

           <colum name="ＤＭ不要区分">

             <th_colspan>5</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>a</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="担当情報">

             <th_colspan>3</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>b</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="顧客情報①">

             <th_colspan>7</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>c</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

            </colum>

          <colum name="顧客情報②">

             <th_colspan>2</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>d</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="顧客情報③">

             <th_colspan>2</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>e</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="決着情報">

             <th_colspan>1</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>f</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="車両情報①">

             <th_colspan>8</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>g</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="車両情報②">

             <th_colspan>6</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>h</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="重点商談対象">

             <th_colspan>4</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFE4B5</th_bgcolor>

             <a_data_type>i</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

            </colum>

          <colum name="直近投函予定">

             <th_colspan>4</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFB6C1</th_bgcolor>

             <a_data_type>j</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="直近活動対象">

             <th_colspan>8</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#DDA0DD</th_bgcolor>

             <a_data_type>k</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="おすすめコンテンツ">

             <th_colspan>6</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#8FBC8F</th_bgcolor>

             <a_data_type>l</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="過去プロモーション情報">

             <th_colspan>6</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#87CEEB</th_bgcolor>

             <a_data_type>m</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

      </th>

      <th id="th">

           <colum name="※初度登録から30ヶ月以上で下記項目に該当">

             <th_colspan>4</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>ichild</th_class>

             <th_bgcolor>#FFE4B5</th_bgcolor>

           </colum>

           <colum name="本部発">

             <th_colspan>2</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>jchild</th_class>

             <th_bgcolor>#FFB6C1</th_bgcolor>

           </colum>

           <colum name="店舗発">

             <th_colspan>2</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>jchild</th_class>

             <th_bgcolor>#FFB6C1</th_bgcolor>

           </colum>

           <colum name="新車系">

             <th_colspan>3</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>lchild</th_class>

             <th_bgcolor>#8FBC8F</th_bgcolor>

           </colum>

           <colum name="サービス・対応系">

             <th_colspan>3</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>lchild</th_class>

             <th_bgcolor>#8FBC8F</th_bgcolor>

           </colum>

      </th>

      <th id="th">

        <colum name="DM不要区分">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="DM区分_新車">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="DM区分_サービス">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="DM区分_その他">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="個人情報提供同意・不同意区分">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="担当店舗">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>bchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="担当者">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>bchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="ｻｰﾋﾞｽ工場">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>bchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="お客様ＮＯ">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="お客様名">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="電話*">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="法人区分">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="現状保有台数">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="顧客層別">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

  

   </layout>

#2

获取table里a标签的自定义属性 
					$("#category th a").each(function(){

						var type = $(this).attr("data-type");

						alert(type);

					})

#3

为所有的a标签设置样式
$("#category th a").css({backgroundColor:"#666"})

#4

另外设置样式直接在css样式表中设置就好了，不需要用js

#5

怎样能够点击哪列a标签就显示这列a标签的data-type属性呢？

#6

引用 5 楼 weixin_37407046 的回复:
怎样能够点击哪列a标签就显示这列a标签的data-type属性呢？ 



					$("#category").on("click","a",function(){

						var type = $(this).attr("data-type");

						alert(type);

					})

#7

最后一处疑问，怎样使type变为全局变量呢？如果我要是获取表头colspan的值，这样能否获取到？category是个容器还是什么？大概是怎么个用法 


var colspan = Number($(this).attr("colspan"));

#8

为何获取到flag了，并且也获取到type了，为何if语句不执行呢？ 


function searchChange() {

					$("#category").on("click","a",function(){

						var flag = $(this).text();

					    var type = $(this).attr("data-type");

					    var beginlevel = 2;

					    var endlevel = 4;

						alert(beginlevel);

						alert(flag);

					    if("-" == flag){

							alert("进入判断成功！");

					    }

					})


#9

引用 7 楼 weixin_37407046 的回复:
最后一处疑问，怎样使type变为全局变量呢？如果我要是获取表头colspan的值，这样能否获取到？category是个容器还是什么？大概是怎么个用法 


var colspan = Number($(this).attr("colspan"));

var type; 在函数外声明就是全局变量，但你要在函数内赋值，在赋值之前变量是没有值的。
colspan是在th元素中的，要先找到对应的th元素：
var colspan = Number($(this).closest("th").attr("colspan"));

category是容器(如div元素)的id，具体的要看你的html代码，通过元素的id就可以方便的获取此元素。

#10

引用 8 楼 weixin_37407046 的回复:
为何获取到flag了，并且也获取到type了，为何if语句不执行呢？ 


function searchChange() {

					$("#category").on("click","a",function(){

						var flag = $(this).text();

					    var type = $(this).attr("data-type");

					    var beginlevel = 2;

					    var endlevel = 4;

						alert(beginlevel);

						alert(flag);

					    if("-" == flag){

							alert("进入判断成功！");

					    }

					})



看看字符串前后有没有多于的空格
alert("["+flag+"]");

#1

附上部分layout.xml内容 


 <layout id="1">

        <th id="th">

           <colum name="ＤＭ不要区分">

             <th_colspan>5</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>a</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="担当情報">

             <th_colspan>3</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>b</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="顧客情報①">

             <th_colspan>7</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>c</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

            </colum>

          <colum name="顧客情報②">

             <th_colspan>2</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>d</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="顧客情報③">

             <th_colspan>2</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>e</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="決着情報">

             <th_colspan>1</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>f</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="車両情報①">

             <th_colspan>8</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>g</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="車両情報②">

             <th_colspan>6</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFFACD</th_bgcolor>

             <a_data_type>h</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="重点商談対象">

             <th_colspan>4</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFE4B5</th_bgcolor>

             <a_data_type>i</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

            </colum>

          <colum name="直近投函予定">

             <th_colspan>4</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#FFB6C1</th_bgcolor>

             <a_data_type>j</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="直近活動対象">

             <th_colspan>8</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#DDA0DD</th_bgcolor>

             <a_data_type>k</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

            <colum name="おすすめコンテンツ">

             <th_colspan>6</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#8FBC8F</th_bgcolor>

             <a_data_type>l</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

           <colum name="過去プロモーション情報">

             <th_colspan>6</th_colspan>

             <th_rowspan>2</th_rowspan>

             <th_class></th_class>

             <th_bgcolor>#87CEEB</th_bgcolor>

             <a_data_type>m</a_data_type>

             <a_class>searchChange</a_class>

             <a_style>cursor:pointer</a_style>

             <a_name>-</a_name>

           </colum>

      </th>

      <th id="th">

           <colum name="※初度登録から30ヶ月以上で下記項目に該当">

             <th_colspan>4</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>ichild</th_class>

             <th_bgcolor>#FFE4B5</th_bgcolor>

           </colum>

           <colum name="本部発">

             <th_colspan>2</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>jchild</th_class>

             <th_bgcolor>#FFB6C1</th_bgcolor>

           </colum>

           <colum name="店舗発">

             <th_colspan>2</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>jchild</th_class>

             <th_bgcolor>#FFB6C1</th_bgcolor>

           </colum>

           <colum name="新車系">

             <th_colspan>3</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>lchild</th_class>

             <th_bgcolor>#8FBC8F</th_bgcolor>

           </colum>

           <colum name="サービス・対応系">

             <th_colspan>3</th_colspan>

             <th_rowspan>1</th_rowspan>

             <th_class>lchild</th_class>

             <th_bgcolor>#8FBC8F</th_bgcolor>

           </colum>

      </th>

      <th id="th">

        <colum name="DM不要区分">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="DM区分_新車">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="DM区分_サービス">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="DM区分_その他">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="個人情報提供同意・不同意区分">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>achild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="担当店舗">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>bchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="担当者">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>bchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="ｻｰﾋﾞｽ工場">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>bchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="お客様ＮＯ">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="お客様名">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="電話*">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="法人区分">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="現状保有台数">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

       <colum name="顧客層別">

         <th_colspan>1</th_colspan>

         <th_rowspan>1</th_rowspan>

         <th_class>cchild</th_class>

         <th_bgcolor>#FFFACD</th_bgcolor>

       </colum>

  

   </layout>

#2

获取table里a标签的自定义属性 
					$("#category th a").each(function(){

						var type = $(this).attr("data-type");

						alert(type);

					})

#3

为所有的a标签设置样式
$("#category th a").css({backgroundColor:"#666"})

#4

另外设置样式直接在css样式表中设置就好了，不需要用js

#5

怎样能够点击哪列a标签就显示这列a标签的data-type属性呢？

#6

引用 5 楼 weixin_37407046 的回复:
怎样能够点击哪列a标签就显示这列a标签的data-type属性呢？ 



					$("#category").on("click","a",function(){

						var type = $(this).attr("data-type");

						alert(type);

					})

#7

最后一处疑问，怎样使type变为全局变量呢？如果我要是获取表头colspan的值，这样能否获取到？category是个容器还是什么？大概是怎么个用法 


var colspan = Number($(this).attr("colspan"));

#8

为何获取到flag了，并且也获取到type了，为何if语句不执行呢？ 


function searchChange() {

					$("#category").on("click","a",function(){

						var flag = $(this).text();

					    var type = $(this).attr("data-type");

					    var beginlevel = 2;

					    var endlevel = 4;

						alert(beginlevel);

						alert(flag);

					    if("-" == flag){

							alert("进入判断成功！");

					    }

					})


#9

引用 7 楼 weixin_37407046 的回复:
最后一处疑问，怎样使type变为全局变量呢？如果我要是获取表头colspan的值，这样能否获取到？category是个容器还是什么？大概是怎么个用法 


var colspan = Number($(this).attr("colspan"));

var type; 在函数外声明就是全局变量，但你要在函数内赋值，在赋值之前变量是没有值的。
colspan是在th元素中的，要先找到对应的th元素：
var colspan = Number($(this).closest("th").attr("colspan"));

category是容器(如div元素)的id，具体的要看你的html代码，通过元素的id就可以方便的获取此元素。

#10

引用 8 楼 weixin_37407046 的回复:
为何获取到flag了，并且也获取到type了，为何if语句不执行呢？ 


function searchChange() {

					$("#category").on("click","a",function(){

						var flag = $(this).text();

					    var type = $(this).attr("data-type");

					    var beginlevel = 2;

					    var endlevel = 4;

						alert(beginlevel);

						alert(flag);

					    if("-" == flag){

							alert("进入判断成功！");

					    }

					})



看看字符串前后有没有多于的空格
alert("["+flag+"]");
标签：

相关文章