Layui table selects the radio button of the specified row and scrolls to the implementation code of the row

The layui table has multiple rows of data. Through external input content, you need to locate the specified row, select the row to change, and perform operations on the row.

Result:

HTML code:

<body>
      <div class="layui-fluid">
         <input type="text" id="txt_id" />
          <table class="layui-hide" id="test" lay-filter="test"></table>
          <script type="text/html" id="toolbarDemo">
              <div class="layui-btn-container">
                  <button class="layui-btn layui-btn-sm" lay-event="getCheckData">Get the selected row data</button>
                 <button class="layui-btn layui-btn-sm" lay-event="SetChecked">Set the selected row</button>
             </div>
         </script>
  
     </div>
     <script src="lib/jquery-1.9.1.min.js"></script>
     <script src="layui/layui.all.js"></script>
     <script src="lib/AjaxCommon.js"></script>
     <script>
         layui.use('table', function () {
             : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : : :

Background code:

 public class LayUITableEntity
  { 
   public string code
  { 
  get; 
  set; 
  }
  public string msg
  { 
  get; 
  set; 
  } 
   public string count 
   {
   get; 
   set;
   } 
    public object data 
    { 
    get;
    set;
    } 
    }
    public class TestEntity 
    {
   /// <summary>
  /// This field is used to indicate whether the radio is selected. /// </summary>
   public bool LAY_CHECKED 
    { 
    get; set;
    } 
    = false; 
    public string Id
    {
    get;
    set; 
    } 
    public string Name
    { 
    get; set;
    } 
    }
    [Route("/api/test")]
    public class TestController : ServiceController
    { 
    [RouteHttpGet("hello")] 
    public FormiumResponse HelloNanUI(FormiumRequest request) 
    { 
     List<TestEntity> teList = new List<TestEntity>(); 
     for (int i = 1; i <= 30; i++) 
    {
   TestEntity te = new TestEntity() 
    { 
     //First time loading, the layer with id 3 is selected LAY_CHECKED = i == 3 ? true : false,
     Id = i.ToString(),
     Name = "name" + i.ToString() 32 
    }; 
    teList.Add(te);
    } 
 LayUITableEntity layUITableEntity = new LayUITableEntity() 
    {
    code = "0",
    count = teList.Count().ToString(),
    msg = "", 
    data = teList
    }; 
    return Json(layUITableEntity); 
    } 
    }

This is the end of this article about the implementation code of selecting the radio button in the specified row of the Layui table and scrolling to the row. For more relevant Layui table selected radio button scrolling content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Solution for front-end browser font size less than 12px

>>: Detailed explanation of several clever applications of position:sticky sticky positioning

JS implements multiple tab switching carousel

Layui table selects the radio button of the specified row and scrolls to the implementation code of the row

JS implements multiple tab switching carousel

Markup Language - Image Replacement

React+TypeScript project construction case explanation

CentOS 7 cannot access the Internet after modifying the network card

Detailed explanation of how to view the current number of MySQL connections

Detailed explanation of dynamically generated tables using javascript

MySQL import and export backup details

About the implementation of JavaScript carousel

5 cool and practical HTML tags and attributes introduction

js to achieve simple accordion effect

Recommend

Sample code for flask and vue front-end and back-end separation project deployment

MySQL time type selection

MYSQL database basics - Join operation principle

A detailed introduction to the redesign of the Weibo component on the website (pictures and text)

TypeScript installation and use and basic data types

CSS clear float clear:both example code

What does the legendary VUE syntax sugar do?

Mini Program to Implement Slider Effect

Detailed explanation of virtual DOM and diff algorithm in react

Enabling or disabling GTID mode in MySQL online

Vue Router vue-router detailed explanation guide

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

What scenarios are not suitable for JS arrow functions?

Vue implements accordion effect

How to implement dynamic automatic up and down of upstream servers without reload based on nginx