Question

我需要在表格中为每个TR的第一个TD添加Checkbox。假设Table如下

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>

Jquery代码：

 var tdCnt=0;
    $('table tr').each(function(){
        $('<td>').append
        $('<input />', {
            type : 'checkbox',
            id : 'td' + tdCnt,
            class : 'dt-checkboxes',
            value : name
        }).appendTo($(this));
        $('</td>').appendTo($(this));
        tdCnt++;
    });

感谢帮助，谢谢。

Answer 1

您要追加行。你在哪里说

我需要在表格中为每个TR的第一个TD添加Checkbox。

那应该是

}).appendTo($(this).find("td").eq(0));

＆＃13;

var tdCnt=0;
    $('table tr').each(function(){
        $('<input />', {
            type : 'checkbox',
            id : 'td' + tdCnt,
            class : 'dt-checkboxes',
            value : name
        }).appendTo($(this).find("td").eq(0));
        tdCnt++;
    });

＆＃13;

.dt-checkboxes {
float :left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>

＆＃13;

此外，您还要添加另一个空的td。已删除$('</td>').appendTo($(this));。

Answer 2

您还可以使用第一个选择器：

＆＃13;

here is java class




 import android.os.AsyncTask;
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.ListView;

    import org.json.JSONArray;
    import org.json.JSONException;
    import org.json.JSONObject;

    import java.io.BufferedReader;
    import java.io.IOException;
    import java.io.InputStream;
    import java.io.InputStreamReader;
    import java.net.HttpURLConnection;
    import java.net.MalformedURLException;
    import java.net.URL;
    import java.util.ArrayList;
    import java.util.List;

    public class MainActivity extends AppCompatActivity {

        private String TAG = "MTAG";

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            ListView listView=(ListView)findViewById(R.id.lvbio);




                //    new JsonTask().execute("https://api.myjson.com/bins/1d3ei7");


        }


       public  class JsonTask extends AsyncTask<String,String,List<Bio>>{
           @Override
           protected List<Bio> doInBackground(String... params) {
               HttpURLConnection connection=null;
               BufferedReader reader=null;
               try{

                   URL url=new URL(params[0]);
                  connection=(HttpURLConnection) url.openConnection();
                   connection.connect();
                   InputStream stream=connection.getInputStream();
                   reader=new BufferedReader(new InputStreamReader(stream));
                   StringBuffer buffer=new StringBuffer();
                   String line="";
                   while (reader.readLine()!=null){
                       buffer.append(line);
                   }
                   String finalJson=buffer.toString();


                   JSONObject parentObject=new JSONObject(finalJson);


                   JSONArray parentArray=parentObject.getJSONArray("Bio");
                   List<Bio> bioList=new ArrayList<>();

                   for (int i=0; i<parentArray.length();i++){
                       JSONObject finalobject=parentArray.getJSONObject(i);
                       Bio bio=new Bio();

                       bio.setId(finalobject.getInt("id"));
                       bio.setFirst_name(finalobject.getString("first_name"));
                       bio.setGender(finalobject.getString("gender"));
                       bio.setImage(finalobject.getString("image"));



                     bioList.add(bio);
                   }
                   return bioList;
               }
               catch (MalformedURLException e) {
                   e.printStackTrace();
               } catch (IOException e) {
                   e.printStackTrace();
               } catch (JSONException e) {
                   e.printStackTrace();
               }
               return null;
           }

           @Override
           protected void onPostExecute(List<Bio> bios) {
               super.onPostExecute(bios);
           }
       }

        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.menu_main,menu);
            return true;
        }

        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
           // return super.onOptionsItemSelected(item);

            int id=item.getItemId();
            if (id==R.id.refresh){
                new JsonTask().execute("https://api.myjson.com/bins/1d3ei7");
                return true;
            }
            return super.onOptionsItemSelected(item);
        }
    }



here is layout 




 <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context="com.example.offline.networking.MainActivity">


        <ListView
            android:id="@+id/lvbio"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

＆＃13;

var tdCnt=0;
$('table tr').each(function(){
    $(this).find('td').first().append(
    $('<input />', {
        type : 'checkbox',
        id : 'td' + tdCnt,
        class : 'dt-checkboxes',
        value : name
    }));
    tdCnt++;
});

＆＃13;

Answer 3

var tdCnt = 0;
$('table tr').each(function(index, element){
    $(this).prepend('<td><input type="checkbox" id="chckBox_'+tdCnt+'" class="chckClass_'+tdCnt+'" value="" /></td>');
    tdCnt++;
});

Answer 4

您可以使用append(function)并定位first-child。回调的第一个参数是index并且将递增每次迭代

$('table tr :first-child').append(function(i) {
  return $('<input />', {
    type: 'checkbox',
    id: 'td' + i,
    class: 'dt-checkboxes',
    value: name
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
  </tr>
  <tr>
    <td>9</td>
    <td>10</td>
    <td>11</td>
  </tr>
</table>

Answer 5

请检查此代码

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>test</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="jquery.min.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td><input type="checkbox" id="test1" name="ckec"> </td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
            </tr>
        </table>
        <script type="text/javascript">
            $(document).ready(function () {
                var count = 0;
                $('table tr').each(function () {
                    jQuery(this).find('td').first().html('<input type="checkbox" name="ckec" id="test' + count + '">');
count++;
                });
            });
        </script>
    </body>
</html>

如果有任何疑问，请告诉我。

如何使用Jquery为每个TR表中的第一个TD添加复选框？

5 个答案: