如果选中该复选框并使行可编辑（按钮点击），如何使表格突出显示？ [英] How do I make a table row highlight if the checkbox is checked and make the row editable(on button click)?

问题描述

我正在创建一个包含表格的Jquery Mobile页面。该表将显示用户。表行包括第一个单元格中的复选框，后跟用户信息。



如果勾选/点击行复选框，我希望突出显示该行。在表格的底部有一个按钮（编辑）。只有在突出显示至少一行时才应启用此按钮。单击此按钮时，我希望所有突出显示的行内容都可以在适当的位置编辑，即文本框将显示在用户名的位置，并在框中显示现有的用户名。



我想在点击编辑按钮时制作可编辑的行，当



a）行时勾选复选框/突出显示行。



表格是使用JavaScript循环创建的（函数在页面加载时加载）。

  var  UsersHTML =  < table class ='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'> + 
  < thead> + 
  < tr class ='ui-bar -b schedule_row'> + 
  < th>< / th> + 
  < th> UserID< / th> + 
  < th>名字< / th> + 
  < th> ;姓氏< / th> + 
  < th>主页位置< / th> ; + 
  < / tr> + 
  < / thead> + 
  < tbody>; 
 
 
 
  for （s =  0 ; s<  15 ; s ++）{
  //   contenteditable ='true' 
 UsersHTML + =  < tr class ='schedule_row '> + 
  < td class ='user_check_cell'> +  < input type ='checkbox'> +  < / td> + 
  < td> + +  < / td> ; + 
  < td> + +  < / td> + 
  < td> ; + +  < / td> + 
  < td> + +  < span class =code-string>< / td> + 
  < ; td> + +  < / td> + 
  < td align ='right'; 
 
 
 UsersHTML + =  < / td>< / tr> ; 
} 
 
 UsersHTML + =  < / tbody>< / table> ;; 
 
 $（ ＃usersContent）。html（UsersHTML）; 

我用div来显示页面上的表格：

 <   div     id   =  usersContent >  
 <   / div  >  

任何帮助都会很棒！

解决方案

（ ＃usersContent）。html（UsersHTML）;

我用div来显示页面上的表格：



< pre lang =HTML> < div id = usersContent >
< / div >

任何帮助都会很棒！

I am creating a Jquery Mobile page which includes a table. The table will display users. Table rows include checkboxes in the first cell, followed by the users information.

I would like the row to be highlighted if the rows checkbox is ticked/clicked. At the bottom of the table there is a button (Edit). This button should only be enabled when at least one row is highlighted. When this button is clicked I want all the highlighted rows content to become editable in place, i.e a textbox will appear in place of the username, with the existing username in the box.

I want to make editable rows on the click of the edit button, when

a) the rows checkbox is ticked/row is highlighted.

The table has been created using a JavaScript loop (function is loaded on page load).

var UsersHTML = "<table class='full_width_table info_table_style ui-body-d ui-shadow table-stripe ui-responsive'>" +
                        "<thead>" +
                           "<tr class='ui-bar-b schedule_row'>" +
                             "<th></th>" +
                             "<th>UserID</th>" +
                             "<th>First Name</th>" +
                             "<th>Surname</th>" +
                             "<th>Home Location</th>" +
                           "</tr>" +
                         "</thead>" +
                         "<tbody>";



for (s = 0; s < 15; s++) {
    //contenteditable='true'
    UsersHTML += "<tr class='schedule_row'>" +
         "<td class='user_check_cell'>" +"<input type='checkbox'>" + "</td>" +
         "<td> " + + "</td>" +
          "<td>" + + "</td>" +
          "<td>" + + "</td>" +
          "<td>" + + "</td>" +
        "<td>" + + "</td>" +
         "<td align='right'";


    UsersHTML += "</td></tr>";
}

UsersHTML += "</tbody></table>";

$("#usersContent").html(UsersHTML);

I have used a div to display the table on the page:

<div id="usersContent">
        </div>

Any help would be great!

解决方案

("#usersContent").html(UsersHTML);

I have used a div to display the table on the page:

<div id="usersContent">
        </div>

Any help would be great!

这篇关于如果选中该复选框并使行可编辑（按钮点击），如何使表格突出显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！